skills.rest
trobias
trobiasCOMMUNITY
Explore all skills by this author →
Website𝕏@tobiasnwnGitHub

gsap-scrolltrigger

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

Updated Aug 28, 2026
Search Tags:#javascript#gsap#pinning#parallax#scrolltrigger#scrub#scroll animation
One-click install
npx skills add https://github.com/trobias/portfolio-nextjs-v2 --skill gsap-scrolltrigger-trobias
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-scrolltrigger
Source: https://github.com/trobias/portfolio-nextjs-v2/tree/main/.agents/skills/gsap-scrolltrigger
Command: npx skills add https://github.com/trobias/portfolio-nextjs-v2 --skill gsap-scrolltrigger-trobias

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 cleanup logic that is error-prone and hard to maintain. This Skill provides the correct patterns for the GSAP ScrollTrigger plugin so scroll-linked tweens, pinned sections, and scrubbed timelines work reliably. ## Core Features & Use Cases - Scroll-Linked Animations: Trigger tweens and timelines based on scroll position using start/end triggers, toggleActions, and scrub. - Pinning and Fake Horizontal Scroll: Pin sections during scroll and build containerAnimation-based horizontal scroll effects with the required ease: "none" pattern. - Batching and Custom Scrollers: Use ScrollTrigger.batch() for staggered viewport reveals and scrollerProxy() to integrate third-party smooth-scroll libraries. - Use Case: A developer building a landing page wants a section to pin while its content animates horizontally as the user scrolls vertically, with proper cleanup in a React app via useGSAP(). ## Quick Start Ask the assistant to create a GSAP ScrollTrigger animation that pins a section and scrubs a timeline 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 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 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 to automatically revert and clean up ScrollTriggers when components unmount. Alternatively, kill instances manually in a useEffect cleanup with ScrollTrigger.getAll() or ScrollTrigger.getById().

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

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 that pinning and snapping are unavailable on containerAnimation-based ScrollTriggers.

Why do my ScrollTrigger positions break after content loads?▼

ScrollTrigger calculates positions at creation time, so dynamically loaded content, images, or fonts shift trigger positions. Call ScrollTrigger.refresh() after layout changes; viewport resizes are handled automatically with a 200ms debounce.

Related Skills

Explore More Software Engineering Skills→
wubq511wubq511
6

gsap-plugins

Register GSAP plugins for scroll, SVG, and draggable animations.

Community
Advanced
manhthien2005manhthien2005

responsive-qa

Verify responsive layout and interaction quality across Chrome viewports.

Community
Intermediate
aesthezelaesthezel
8

gsap-core

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

Community
Advanced
andersoncollabandersoncollab

scroll-animations

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

Community
Intermediate