skills.rest
Microck
MicrockCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gsap

Create GSAP tweens, timelines, and scroll-triggered animations.

Updated Feb 17, 2026
Search Tags:#react#javascript#animation#gsap#svg animation#scrolltrigger#web animation
One-click install
npx skills add https://github.com/Microck/gsap-skills --skill gsap-microck
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap
Source: https://github.com/Microck/gsap-skills/tree/main/skills/gsap
Command: npx skills add https://github.com/Microck/gsap-skills --skill gsap-microck

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive toolkit for creating high-performance, complex web animations, from simple tweens to intricate scroll-driven sequences and interactive elements.

Core Features & Use Cases

  • Core Animations: Create tweens, timelines, and sequences for elements.
  • Scroll-Triggered Animations: Link animations to scroll position using ScrollTrigger.
  • SVG Animation: Animate SVG paths, morph shapes, and draw effects.
  • Layout Transitions: Implement smooth layout changes with the Flip plugin.
  • Interactive Elements: Build draggable components and gesture-based interactions.
  • Text Animation: Animate text character-by-character or with scramble effects.
  • React Integration: Seamlessly use GSAP within React applications with useGSAP.
  • Use Case: Build a visually engaging product landing page with parallax scrolling effects, animated SVG icons that morph on hover, and text reveals that trigger as the user scrolls down the page.

Quick Start

Use the gsap skill to create a timeline that animates a box element to move 200 pixels to the right over 1 second.

Frequently Asked Questions about gsap

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

FAQPage Schema
How do I create scroll-triggered web animations for a landing page?▼

Scroll-triggered web animations are created by linking element tweens to the scroll position using the ScrollTrigger plugin, allowing you to build parallax effects and text reveals that activate as the user scrolls down a page.

Can I use GSAP for React animation without causing hook conflicts?▼

You can use GSAP for React animation by utilizing the useGSAP hook, which seamlessly integrates complex timelines and sequencing into React applications while managing the animation lifecycle safely.

What is the best way to animate SVG paths and morph shapes for interactive icons?▼

Animating SVG paths and morphing shapes is best handled using dedicated SVG manipulation plugins like MorphSVG and DrawSVG, which facilitate dynamic path morphing and line drawing effects for interactive web elements.

How do I implement smooth layout transitions when the DOM changes?▼

Smooth layout transitions are implemented using the Flip plugin, which calculates element position and size differences before and after a DOM change to animate seamless layout state transitions.

Does this animation platform support gesture-based draggable components?▼

The animation platform supports gesture-based interactive elements through the Draggable and Observer plugins, enabling you to build components that respond directly to user drag gestures and interactive behaviors.

How do I animate text character-by-character or with scramble effects?▼

Text animation character-by-character or with scramble effects is achieved using the SplitText and TextPlugin tools, which break text into individual characters to facilitate complex sequencing and dynamic text reveals.

Related Skills

Explore More Design & Creative Skills→
shirulotshirulot

anime

Manage JavaScript web animations, timelines, and physics-driven interactions.

Community
Advanced
TumeloRamaphosaTumeloRamaphosa

motion-framer

Create declarative UI animations for React with Motion primitives.

Community
Intermediate
soo-kate-yeonsoo-kate-yeon

moai-tool-svg

Create, optimize, and transform SVG graphics with SVGO and animations.

Community
Advanced
DanielV-94DanielV-94

animation-designer

Create web UI animations with Framer Motion, CSS keyframes, and GSAP.

Community
Intermediate