skills.rest
josippapez
josippapezCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gsap-scrolltrigger

Implements scroll-linked animations, pinning, and scrubbing with GSAP ScrollTrigger.

Updated May 5, 2026
Search Tags:#javascript#gsap#pinning#parallax#scrolltrigger#scrub#scroll animation
One-click install
npx skills add https://github.com/josippapez/ai-setup --skill gsap-scrolltrigger-josippapez
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-scrolltrigger
Source: https://github.com/josippapez/ai-setup/tree/main/claude/plugins/better-design/skills/gsap-scrolltrigger
Command: npx skills add https://github.com/josippapez/ai-setup --skill gsap-scrolltrigger-josippapez

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? Building scroll-driven animations—triggering tweens on scroll, pinning sections, scrubbing timelines to scroll position—requires precise ScrollTrigger configuration, and common mistakes (wrong ease on containerAnimation, missing refresh calls, scrub mixed with toggleActions) produce broken or janky results. ## Core Features & Use Cases - Scroll-Linked Animation: Tie tweens and timelines to scroll position with start/end triggers, scrub, and toggleActions. - Pinning & Fake Horizontal Scroll: Pin sections during scroll and build horizontal-scroll effects via containerAnimation with the required ease: "none" pattern. - Advanced APIs: Use ScrollTrigger.batch() for staggered viewport reveals and ScrollTrigger.scrollerProxy() to integrate third-party smooth-scroll libraries. - Use Case: A landing page needs a pinned hero section whose content slides horizontally as the user scrolls vertically, plus fade-in cards on scroll—this Skill provides the exact config patterns and cleanup practices to implement it correctly. ## Quick Start Use the gsap-scrolltrigger skill to create a pinned section with a scrubbed timeline that animates three elements as the user scrolls.

Frequently Asked Questions about gsap-scrolltrigger

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I trigger a GSAP animation on scroll?▼

Register the plugin with gsap.registerPlugin(ScrollTrigger), then add a scrollTrigger config object to your tween or timeline with trigger, start, and end properties. Use toggleActions for play/reverse behavior or scrub to link progress directly to scroll position.

How to pin a section while scrolling with ScrollTrigger?▼

Set pin: true in the scrollTrigger config and define an end value like "+=1000" to control pin duration. ScrollTrigger adds pin spacing by default so layout does not collapse; animate children of the pinned element rather than the pinned element itself.

Can I use ScrollTrigger with React?▼

Yes. Use the useGSAP() hook from the @gsap/react package so ScrollTriggers and animations are automatically reverted on unmount. Alternatively, manually kill instances in a useEffect cleanup with ScrollTrigger.getAll().forEach(t => t.kill()).

Why is my horizontal scroll animation out of sync with ScrollTrigger?▼

The horizontal tween used with containerAnimation must have ease: "none"; any other ease breaks the 1:1 mapping between vertical scroll and horizontal position. Also note pinning and snapping are unavailable on containerAnimation-based ScrollTriggers.

Why does ScrollTrigger fire at wrong positions after content loads?▼

Dynamic content, images, or fonts change layout after ScrollTrigger calculates positions. Call ScrollTrigger.refresh() after such changes; viewport resize is handled automatically with a 200ms debounce, but DOM mutations are not.

Should I use scrub or toggleActions for scroll animations?▼

Use scrub when animation progress should follow scroll position continuously, and toggleActions for discrete play/reverse triggers at scroll boundaries. Never combine both on the same ScrollTrigger—if both exist, scrub wins.

Related Skills

Explore More Software Engineering Skills→
ScarletFishScarletFish

gsap-scrolltrigger

Synchronize GSAP tweens and timelines with browser scroll position.

Community
Intermediate
hanzoaihanzoai

gsap-react

Implement GSAP animations in React with useGSAP and automatic cleanup.

Official
Intermediate
noklip-ionoklip-io
1

gsap

Create GSAP web animations with timelines and scroll-triggered effects.

Official
Intermediate
andersoncollabandersoncollab

scroll-animations

Implement CSS scroll-driven animations with scroll() and view() timelines.

Community
Intermediate