skills.rest
marcmarti9
marcmarti9COMMUNITY
Explore all skills by this author →
GitHub

gsap-scrolltrigger

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? Building scroll-driven animations from scratch requires manual scroll event handling, position calculations, and layout management that is error-prone and hard to maintain. This Skill provides the correct GSAP ScrollTrigger patterns for triggering, pinning, and scrubbing animations tied to scroll position. ## Core Features & Use Cases - Scroll-Linked Triggers: Start, end, and toggle tweens or timelines based on element and viewport positions with configurable start/end values and toggleActions. - Pinning and Scrubbing: Pin sections during a scroll range and link animation progress directly to scroll position, including fake horizontal scroll via containerAnimation. - Batching and Custom Scrollers: Use ScrollTrigger.batch() for staggered viewport-entry animations and scrollerProxy() to integrate third-party smooth-scroll libraries. - Use Case: When a user asks to pin a hero section while content scrolls horizontally, the Skill produces a pinned ScrollTrigger with an ease-none horizontal tween and correctly scoped containerAnimation triggers. ## Quick Start Use the gsap-scrolltrigger skill to create a pinned section that 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 or timeline with trigger, start, and end values. Use toggleActions for discrete play/reverse behavior or scrub to link progress to scroll position.

How to pin an element while scrolling with ScrollTrigger?▼

Set pin: true in the scrollTrigger config and define an end value such as "+=1000" to control the pin duration. pinSpacing defaults to true, adding a spacer so the layout does not collapse; animate children 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, kill instances manually in a useEffect cleanup using ScrollTrigger.getAll() or getById().

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

The horizontal tween used with containerAnimation must use ease: "none" so scroll position maps 1:1 to horizontal movement. Any other ease breaks the alignment, and pinning or snapping is unavailable on containerAnimation-based ScrollTriggers.

Should I use scrub or toggleActions in ScrollTrigger?▼

Use scrub when animation progress should follow scroll position continuously, and toggleActions for discrete play/reverse at boundaries. Do not combine both on the same trigger; if both are present, scrub wins.

Related Skills

Explore More Software Engineering Skills→
aesthezelaesthezel
8

gsap-core

Create GSAP tweens, timelines, and scroll-driven animations in JavaScript.

Community
Advanced
hanzoaihanzoai

gsap-react

Implement GSAP animations in React with useGSAP and automatic cleanup.

Official
Intermediate
hanzoaihanzoai

gsap-scrolltrigger

Link GSAP animations to scroll events with ScrollTrigger.

Official
Advanced
fyunusafyunusa

scroll-reveal-libraries

Implement scroll-triggered animations with AOS data attributes.

Community
Basic