skills.rest
luce12
luce12COMMUNITY
Explore all skills by this author →
GitHub

gsap-scrolltrigger

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

1|Updated Aug 6, 2026
Search Tags:#frontend#gsap#pinning#parallax#ScrollTrigger#scrub#scroll animation
One-click install
npx skills add https://github.com/luce12/agent-dev-workflow --skill gsap-scrolltrigger-luce12
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-scrolltrigger
Source: https://github.com/luce12/agent-dev-workflow/tree/main/toolkits/gsap-scrolltrigger
Command: npx skills add https://github.com/luce12/agent-dev-workflow --skill gsap-scrolltrigger-luce12

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? Building scroll-driven animations by hand requires tracking scroll positions, viewport intersections, and layout recalculations, which is error-prone and verbose. This Skill provides the correct GSAP ScrollTrigger patterns for triggering, pinning, scrubbing, and batching animations tied to scroll position. ## Core Features & Use Cases - Scroll-Linked Tweens and Timelines: Tie any GSAP tween or timeline to scroll position using start/end triggers, toggleActions, or scrub for direct scroll-driven progress. - Pinning and Fake Horizontal Scroll: Pin sections during a scroll range and drive horizontal content movement from vertical scroll using containerAnimation with ease: "none". - Batching and Third-Party Scrollers: Use ScrollTrigger.batch() for staggered viewport-entry animations and scrollerProxy() to integrate external smooth-scroll libraries. - Use Case: When building a landing page with a pinned hero section that reveals content as the user scrolls, apply the pinning and scrub patterns, then call ScrollTrigger.refresh() after dynamic content loads. ## Quick Start Use the gsap-scrolltrigger skill to pin the hero section and scrub a fade-in animation on the feature cards 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 ScrollTrigger plugin with gsap.registerPlugin(ScrollTrigger), then add a scrollTrigger config object to your tween with trigger, start, and end properties. Use toggleActions for discrete 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 pin for 1000px of scroll. Animate children of the pinned element rather than the pinned element itself, and leave pinSpacing at its default true so layout does not collapse.

Can I use ScrollTrigger with React?▼

Yes, use the useGSAP() hook from the @gsap/react package to automatically revert and clean up ScrollTriggers when components unmount. Alternatively, manually kill instances in a useEffect cleanup using ScrollTrigger.getAll() or ScrollTrigger.getById().

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

The horizontal tween driving a containerAnimation must use ease: "none" so scroll position maps 1:1 to horizontal position. Any other ease breaks the alignment, which is one of the most common ScrollTrigger mistakes.

Why do my ScrollTrigger positions break after loading dynamic content?▼

ScrollTrigger caches positions at creation time, so DOM changes from new content, images, or fonts make them stale. Call ScrollTrigger.refresh() after layout changes; viewport resize is handled automatically with a 200ms debounce.

Should I use scrub and toggleActions together on one ScrollTrigger?▼

No, choose one behavior per ScrollTrigger. Scrub links animation progress continuously to scroll position, while toggleActions fire discrete play/reverse actions at boundaries; if both are set, scrub wins.

Related Skills

Explore More Software Engineering Skills→
hanzoaihanzoai

gsap-core

Create timeline-based web animations with GSAP core API across frameworks.

Official
Intermediate
cbemistercbemister

browser-test

test1

Community
Advanced
VXerysVXerys

scaffold-gsap-scrolltrigger

Generate React/Next.js components with GSAP ScrollTrigger for scroll animations.

Community
Intermediate
coastdigitalgroupcoastdigitalgroup
2

scroll-reveal-implementation

Trigger viewport-based entrance animations using IntersectionObserver with reduced-motion fallbacks.

Official
Intermediate