GSAP

What Is GSAP?

GSAP (GreenSock Animation Platform) is a professional-grade JavaScript animation library used on over 12 million websites. Created by GreenSock, GSAP provides timeline-based animations, scroll-triggered effects, and complex sequencing that would be extremely difficult to achieve with CSS animations alone.

Animation Engine

GSAP animates any numeric property of any JavaScript object, including CSS properties, SVG attributes, canvas elements, and custom object properties. The engine is framework-agnostic and works with React, Vue, Svelte, Angular, or vanilla JavaScript.

Tweens animate properties from one value to another with configurable duration, easing, delay, and callbacks. Timelines sequence multiple tweens with precise timing control, labels, and the ability to overlap, stagger, and nest animations.

ScrollTrigger

ScrollTrigger is GSAP's most popular plugin, connecting animations to scroll position. Elements can animate as they enter and leave the viewport, pin during scrolling, scrub through animation progress based on scroll position, and snap to specific points.

Performance

GSAP is optimized for smooth 60fps animations. It uses requestAnimationFrame, minimizes layout thrashing by batching DOM reads and writes, and provides will-change management. Benchmarks consistently show GSAP outperforming CSS animations for complex sequences.

Additional Plugins

MorphSVG morphs between SVG shapes. DrawSVG reveals SVG strokes progressively. SplitText breaks text into characters, words, and lines for individual animation. Flip animates layout changes smoothly. MotionPath moves elements along SVG paths.

Why Use GSAP

Projects requiring sophisticated, performant animations beyond CSS capabilities choose GSAP. The timeline system, ScrollTrigger, and specialized plugins enable creative effects that define premium web experiences.