GSAP
GSAP (GreenSock Animation Platform) is a professional JavaScript animation library for creating high-performance, production-ready web animations. It powers animations on millions of websites and is trusted by major brands.
In This Section
- Getting Started — Install, timeline basics, and your first animation
- Timelines & Sequencing — Building complex, choreographed animation sequences
- ScrollTrigger — Scroll-driven animations, pinning, scrubbing, and parallax
- Easing & Motion Paths — Custom eases, motion along paths, and organic movement
- Performance & Optimization — Best practices, GPU acceleration, and debugging
Pages in this section
GSAP Getting Started — Complete Beginner's Guide to JavaScript Animation
Learn GSAP from scratch with our complete beginner's guide. Master gsap.to(), gsap.from(), gsap.fromTo(), stagger, callbacks, and build your first interactive animation playground.
✓ LiveGSAP Timelines Explained — Step-by-Step Guide to Sequencing Animations
Master GSAP timelines for sequencing animations — position parameter, labels, nesting, time scaling, overlapping tweens, and building complex choreographed sequences with millisecond precision.
✓ LiveGSAP ScrollTrigger Explained — Complete Guide to Scroll-Driven Animations
Master GSAP ScrollTrigger for scroll-driven animations — pinning, scrubbing, parallax effects, toggle actions, horizontal scrolling, responsive breakpoints, and a full scroll narrative demo.
✓ LiveGSAP Easing Explained — Complete Guide to Motion Paths & Natural Animation
Master GSAP easing and motion paths — Power eases, Elastic, Bounce, Back, CustomEase, MotionPathPlugin, and organic follow-through. Practical guide with runnable examples.
✓ LiveGSAP Performance Optimization — Complete Guide to 60fps Animation
Optimize GSAP animations for 60fps — GPU-accelerated properties, will-change, gsap.quickTo, gsap.quickSetter, layout thrashing prevention, debouncing, and production debugging techniques.
✓ Live