skills.rest
leobbaroni
leobbaroniCOMMUNITY
Explore all skills by this author →
GitHub

gsap-scrolltrigger

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

1|Updated Jul 19, 2026
Search Tags:#javascript#gsap#pinning#parallax#scrolltrigger#scrub#scroll animation
One-click install
npx skills add https://github.com/leobbaroni/maestro --skill gsap-scrolltrigger-leobbaroni
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-scrolltrigger
Source: https://github.com/leobbaroni/maestro/tree/main/skills/maestro/library/gsap-skills/skills/gsap-scrolltrigger
Command: npx skills add https://github.com/leobbaroni/maestro --skill gsap-scrolltrigger-leobbaroni

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, or faking horizontal scroll—requires precise configuration of the GSAP ScrollTrigger plugin, and common mistakes (wrong ease, missing refresh, scrub plus toggleActions) silently break layouts. ## Core Features & Use Cases - Scroll-Linked Animation: Tie tweens and timelines to scroll position with start/end triggers, toggleActions, and scrub for direct or smoothed progress control. - Pinning and Fake Horizontal Scroll: Pin sections during scroll ranges and drive horizontal content movement via containerAnimation with the required ease: "none" pattern. - Batching and Third-Party Scrollers: Use ScrollTrigger.batch() for staggered viewport-entry animations and scrollerProxy() to integrate external smooth-scroll libraries. - Use Case: A developer building a landing page wants a section pinned while cards slide horizontally as the user scrolls vertically; this Skill provides the exact pinned containerAnimation pattern plus cleanup and refresh guidance. ## Quick Start Use the gsap-scrolltrigger skill to pin a section and scrub a timeline of element animations as the user scrolls through it.

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, then add a scrollTrigger config object to a tween or timeline with trigger, start, and end properties. Use toggleActions for discrete play/reverse behavior or scrub to link animation progress directly to scroll position.

How to pin a section while scrolling with GSAP ScrollTrigger?▼

Set pin: true in the scrollTrigger config and define an end value like "+=1000" to control pin duration. 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 GSAP ScrollTrigger with React?▼

Yes, use the useGSAP() hook from the @gsap/react package so ScrollTriggers are reverted and cleaned up automatically on unmount. Alternatively, kill instances manually in a useEffect cleanup via ScrollTrigger.getAll() or ScrollTrigger.getById().

Why is my GSAP horizontal scroll animation out of sync?▼

The horizontal tween used with containerAnimation must use 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?▼

ScrollTrigger calculates positions at creation, so dynamic content, images, or fonts shift trigger points. Call ScrollTrigger.refresh() after layout changes; viewport resize is handled automatically with a 200ms debounce.

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

No, combining them is an anti-pattern; scrub wins and toggleActions is ignored. Choose scrub for scroll-linked progress or toggleActions for discrete enter/leave playback behavior.

Related Skills

Explore More Software Engineering Skills→
wubq511wubq511
6

gsap-scrolltrigger

Create scroll-linked animations and pin elements with GSAP ScrollTrigger.

Community
Advanced
githubgithub
38.5k

gsap-framer-scroll-animation

Implements scroll-driven animations using GSAP ScrollTrigger and Framer Motion in vanilla JS, React, and Next.js.

Official
Intermediate
xingBaGanxingBaGan

gsap-plugins

Integrates GSAP plugins like ScrollToPlugin and Draggable into JavaScript animations.

Community
Advanced
47thtechcorner47thtechcorner
21

gsap-scrolltrigger

Implement scroll-linked animations and pinning with GSAP ScrollTrigger.

Community
Intermediate