Scroll-based animations using GSAP's ScrollTrigger plugin — pinning, scrubbing, snap points, parallax, horizontal scrolling, scroll-driven timelines, and ScrollSmoother. Use this skill when the user wants animations that respond to scroll position, sticky/pinned sections, progress-linked reveals, scroll-triggered counters, storytelling sections that advance as the user scrolls, or any experience where the page scroll drives the narrative or visual state. Also triggers on "pin this section", "animate on scroll", "scrub", "parallax", "sticky section", "reveal as I scroll", "horizontal scroll", "scroll progress bar", or "ScrollTrigger".
Scroll-driven animations and interactions.
npm install gsap
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
gsap.to('.box', {
x: 500,
scrollTrigger: {
trigger: '.box',
start: 'top center',
end: 'bottom center',
scrub: true
}
});
gsap.to('.element', {
x: 200,
scrollTrigger: {
trigger: '.element', // Element that triggers the animation
start: 'top center', // When trigger hits viewport center
end: 'bottom center', // When trigger leaves viewport center
toggleActions: 'play pause resume reset'
}
});
// Format: "trigger-position viewport-position"