skills.rest
TOBIASpuchito
TOBIASpuchitoCOMMUNITY
Explore all skills by this author →
GitHub

gsap-scrolltrigger

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

Updated Jun 9, 2026
Search Tags:#frontend#gsap#pinning#parallax#scrolltrigger#scrub#scroll animation
One-click install
npx skills add https://github.com/TOBIASpuchito/Citec --skill gsap-scrolltrigger-tobiaspuchito
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-scrolltrigger
Source: https://github.com/TOBIASpuchito/Citec/tree/main/citec-frontend/.agents/skills/gsap-scrolltrigger
Command: npx skills add https://github.com/TOBIASpuchito/Citec --skill gsap-scrolltrigger-tobiaspuchito

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? Building scroll-driven animations from scratch requires manual scroll event handling, position math, and layout management. This Skill provides the correct GSAP ScrollTrigger patterns for triggering tweens on scroll, pinning sections, scrubbing animation progress to scroll position, and avoiding common pitfalls like broken pinning or stale trigger positions. ## Core Features & Use Cases - Scroll-Linked Animations: Tie tweens and timelines to scroll position using start/end triggers, toggleActions, and scrub for direct scroll-driven playback. - Pinning and Fake Horizontal Scroll: Pin sections during scroll ranges and build horizontal-scroll effects with containerAnimation, including the required ease: "none" pattern. - Batching and Custom Scrollers: Use ScrollTrigger.batch() for staggered viewport-entry animations and scrollerProxy() to integrate third-party smooth-scroll libraries. - Use Case: A developer building a landing page wants a hero section pinned while content scrolls horizontally, plus fade-in animations as cards enter the viewport. This Skill supplies the exact ScrollTrigger configuration, refresh/cleanup practices, and React useGSAP() integration. ## Quick Start Ask the AI to create a GSAP ScrollTrigger animation that pins a section and scrubs a timeline 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 plugin with gsap.registerPlugin(ScrollTrigger), then add a scrollTrigger config object to your tween 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 to automatically revert and clean up ScrollTriggers when components unmount. Alternatively, manually kill instances in a useEffect cleanup with ScrollTrigger.getAll().forEach(t => t.kill()).

Why is my ScrollTrigger animation out of sync after content loads?▼

ScrollTrigger calculates positions on creation, so dynamic content, images, or fonts that change layout invalidate those positions. Call ScrollTrigger.refresh() after DOM or layout changes; viewport resize is handled automatically with a 200ms debounce.

Should I use scrub or toggleActions for scroll animations?▼

Use scrub when animation progress should map directly to scroll position, optionally with a number for smoothing lag. Use toggleActions for discrete play/reverse behavior at trigger boundaries. Never combine both on the same ScrollTrigger; scrub wins if both exist.

How do I integrate ScrollTrigger with a smooth scrolling library?▼

Use ScrollTrigger.scrollerProxy() to override how ScrollTrigger reads and writes scroll position for your scroller, providing scrollTop getter/setter functions. Then register ScrollTrigger.update as a listener on the third-party scroller so positions stay synchronized.

Related Skills

Explore More Software Engineering Skills→
ScarletFishScarletFish

gsap-scrolltrigger

Synchronize GSAP tweens and timelines with browser scroll position.

Community
Intermediate
ScarletFishScarletFish

gsap-react

Integrate GSAP animations into React and Next.js with useGSAP lifecycle cleanup.

Community
Intermediate
whyiloveher2411whyiloveher2411

gsap-scrolltrigger

Create scroll-linked animations with GSAP ScrollTrigger using triggers, pins, and scrubbing.

Community
Advanced
fyunusafyunusa

scroll-reveal-libraries

Implement scroll-triggered animations with AOS data attributes.

Community
Basic