gsap-scrolltrigger

What problem does it solve?

This Skill enables developers to implement complex, scroll-driven animations efficiently using the GSAP ScrollTrigger plugin, reducing boilerplate and ensuring consistent behavior across devices.

Core Features & Use Cases

• Pinning sections: keep content fixed during scroll to reveal more information.
• Scrubbed animations: tie animation progress directly to scroll position for responsive interactions.
• Snap points & horizontal scrolling: create guided, panel-based navigation and parallax layers.
• Parallax effects: layer backgrounds and foregrounds at different speeds for depth.
• Use Case: build sticky-step product tours, with progress indicators and synchronized transitions.

Quick Start

Install GSAP with npm: npm install gsap. Then import and register the ScrollTrigger plugin in your project: gsap.registerPlugin(ScrollTrigger); Create a basic scroll-driven animation: gsap.to('.box', { x: 500, scrollTrigger: { trigger: '.box', start: 'top center', end: 'bottom center', scrub: true } });