gsap-animation-master

What problem does it solve?

This Skill solves the challenge of coordinating complex GSAP timelines, ScrollTrigger-driven motion, and DOM choreography to deliver buttery-smooth, performant animations across modern web interfaces.

Core Features & Use Cases

• Timelines & Choreography: Build deterministic animation sequences with gsap.timeline() and master precise overlaps using the position parameter.
• ScrollTrigger Engine: Create scroll-driven experiences with scrub, pin, and markers for development-time debugging.
• Performance & Optimization: Prioritize transform/opacity animations, apply will-change, and leverage GPU acceleration to maintain 60fps.
• Advanced Techniques: Utilize FLIP for layout transitions, MotionPath for SVG paths, and distribution/stagger utilities for grid animations.
• Typical Workflow: Cache DOM elements, establish initial states to avoid FOUC, construct the main Timeline, hook into ScrollTrigger, and implement cleanup on unmount.

Quick Start

Set up GSAP with ScrollTrigger on a target section, create a timeline, and pin the section while animating child elements as the user scrolls.