GSAP Animation

Build production-grade web animations with GSAP (GreenSock). Creates timeline sequences, scroll-triggered effects, SVG and text animation, and physics-based easing with performant, framework-agnostic code.

This skill implements professional motion design with GSAP and its plugins (ScrollTrigger, Flip, SplitText). It builds orchestrated timelines, scroll-linked reveals, staggered sequences, morphing SVG, and interactive hover/drag animations tuned for 60fps across React, Vue, and vanilla projects.

When to use

Use when adding landing-page motion, scroll-driven storytelling, complex timeline sequences, SVG/text animation, or any high-fidelity web animation that goes beyond CSS transitions.

Examples

Scroll-driven hero

Pin and animate a hero on scroll

Build a GSAP ScrollTrigger animation that pins the hero section and reveals headline, subtext, and image with a staggered timeline as the user scrolls

Animated stat counters

Count-up numbers on view

Create GSAP animations that count up KPI numbers and draw their underline bars when the stats section scrolls into view

Page transition timeline

Coordinated enter/exit

Implement a GSAP timeline for a route transition that fades out the old page and slides in the new one with overlapping easing