gsap-scrolltrigger_skill

Overview

This skill provides ready-to-use patterns and examples for building scroll-driven animations with GSAP's ScrollTrigger plugin. It covers scrubbing, pinning, snap points, parallax layers, horizontal scrolling, batch reveals, and progress indicators. Use it to turn scroll position into precise animation control and polished UX.

How this skill works

The skill maps scroll position to GSAP timelines and tweens via ScrollTrigger configurations (trigger, start/end, scrub, pin, snap). It includes code patterns for tying animation progress to scroll, pinning sections, snapping to labels or positions, and creating multi-layer parallax. It also shows callbacks, batch processing, markers for development, and responsive matchMedia handling for performance.

When to use it

• Create scroll-tied animations whose progress follows the scrollbar (scrub).
• Build sticky or pinned sections and horizontal scrolling galleries.
• Implement snap-to-section navigation or timeline labels for guided scrolling experiences.
• Add parallax effects with independent layer speeds for depth.
• Stagger or batch reveal lists and cards on scroll for performant entry animations.
• Show scroll progress indicators or sticky header transforms.

Best practices

• Use scrub with a small numeric value for smooth eased follow, or true for instant mapping to scroll. Avoid excessive scrub smoothing on mobile.
• Pin only what you need; use pinSpacing to prevent layout jumps and consider pinSpacing:false for intentional overlays.
• Use ScrollTrigger.matchMedia to disable or simplify complex triggers on small screens.
• Prefer timelines for multi-step sequences and add labels to enable snap-to-label behavior.
• Batch similar elements with ScrollTrigger.batch to reduce layout thrash and improve performance.
• Call ScrollTrigger.refresh() on major DOM changes and kill triggers when unmounting components.

Example use cases

• A hero section that pins and scrubs a multi-step product reveal timeline.
• A horizontal gallery that pins a container and translates panels using xPercent with snap to panels.
• A multi-layer parallax landing page where background moves slower and foreground moves faster.
• A progress bar that scales horizontally tracking page scroll progress.
• Cards or list items that stagger into view using ScrollTrigger.batch for smooth entrance.