GSAP Animation

Build professional, high-performance animations with GSAP. Generates timeline sequences, ScrollTrigger effects, SVG morphing, text animations, and physics-based motion that work across every browser.

This skill helps you craft cinema-grade animations with GSAP (GreenSock Animation Platform). It produces timelines, ScrollTrigger pinned sections, MorphSVG transitions, Flip layout animations, SplitText effects, Draggable interactions, and Observer-driven scroll behaviors — with sensible easing curves and refreshOnResize handling for production-ready motion.

When to use

Use when you need precise timeline control, complex scroll-driven animations, SVG morphing, or motion that has to land pixel-perfect across browsers. GSAP is now MIT-licensed and free for all use.

Examples

Pinned ScrollTrigger section

Pin a section and progress an animation as the user scrolls

Build a horizontal-scroll panel section with GSAP ScrollTrigger that pins on enter, progresses through 4 panels, and unpins cleanly on exit

Hero text reveal

Split a headline into characters and stagger them in

Create a hero text reveal using GSAP SplitText with a staggered character entrance and a blur-to-clear easing

Flip layout animation

Animate between two completely different layouts

Use GSAP Flip to animate cards transitioning from a grid layout to a list layout with FLIP technique