gsap

Create GSAP web animations with timelines and scroll-triggered effects.

1|Updated Jan 21, 2026

Search Tags:#timeline #react #animation #svg #web #gsap #scroll-trigger

Ready to run

npx skills add https://github.com/noklip-io/agent-skills --skill gsap-noklip-io

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: gsap
Source: https://github.com/noklip-io/agent-skills/tree/main/skills/gsap
Command: npx skills add https://github.com/noklip-io/agent-skills --skill gsap-noklip-io

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill solves the challenge of delivering high-performance, visually rich web animations for modern UIs.

Core Features & Use Cases

Timeline and sequencing: coordinate complex motion with precise timing and reusable animation logic.
Scroll-driven effects: integrate with ScrollTrigger and ScrollSmoother for immersive UX.
SVG and UI motion: animate SVG paths, morph shapes, split text, and responsive UI transitions.
Use Case: Imagine a product homepage with hero intro, scroll parallax, and interactive SVG diagrams.

Quick Start

Install GSAP in your project and import the core library and desired plugins. Register plugins like ScrollTrigger, then build animations with gsap.to, gsap.from, or timelines.

Frequently Asked Questions about gsap

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I coordinate complex web animations with precise timing?▼

Coordinate complex web animations using timeline orchestration to sequence motion precisely. You build reusable animation logic with GSAP timelines, controlling multiple UI transitions and SVG paths across a modern web app.

What is the best way to create scroll-driven parallax effects for a web homepage?▼

Create scroll-driven parallax effects by integrating ScrollTrigger and ScrollSmoother plugins. This approach delivers immersive UX by binding web animations directly to scroll position, ideal for interactive product homepages and scroll-based visual effects.

Can I animate SVG paths and morph shapes in a React application?▼

Animate SVG paths and morph shapes in React applications using dedicated GSAP plugins. The toolkit fully supports React integration, allowing you to draw SVG paths, morph shapes, split text, and build responsive UI transitions.

Do I need to install specific plugins to use scroll-based web animations?▼

You need to install the GSAP core library and desired plugins via npm or Yarn to use scroll-based web animations. After installation, import and register plugins like ScrollTrigger before building animations with gsap.to, gsap.from, or timelines.

How does timeline orchestration handle interactive SVG diagrams and UI motion?▼

Timeline orchestration handles interactive SVG diagrams and UI motion by coordinating complex sequences with precise timing. It manages multiple animation properties simultaneously, enabling reusable logic for responsive UI transitions and SVG path drawing.