skills.rest
Wayn-Git
Wayn-GitCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gsap-scrolltrigger

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

52|3|Updated Aug 20, 2026
Search Tags:#javascript#gsap#pinning#parallax#ScrollTrigger#scrub#scroll animation
One-click install
npx skills add https://github.com/Wayn-Git/Amethyst --skill gsap-scrolltrigger-wayn-git
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-scrolltrigger
Source: https://github.com/Wayn-Git/Amethyst/tree/main/agents/skills/gsap-scrolltrigger
Command: npx skills add https://github.com/Wayn-Git/Amethyst --skill gsap-scrolltrigger-wayn-git

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 GSAP ScrollTrigger patterns for triggering, pinning, and scrubbing animations tied to scroll position. ## Core Features & Use Cases - Scroll-Linked Tweens and Timelines: Tie any GSAP tween or timeline to scroll position with configurable start/end points, toggleActions, and scrub behavior. - Pinning and Fake Horizontal Scroll: Pin sections during scroll and build horizontal-scroll effects using containerAnimation with the required ease: "none" pattern. - Advanced APIs: Use ScrollTrigger.batch() for staggered viewport reveals and ScrollTrigger.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 elements fading in as they enter the viewport. ## Quick Start Use the gsap-scrolltrigger skill to pin a section and scrub a timeline of 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 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 discrete play/reverse behavior or scrub to link progress directly 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 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 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 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 between vertical scroll and horizontal position.

When should I not use scrub and toggleActions together?▼

Never combine them on the same ScrollTrigger; they represent conflicting behaviors and scrub wins if both are present. Use scrub for scroll-linked progress and toggleActions for discrete play/reverse at boundaries.

Related Skills

Explore More Software Engineering Skills→
NITRR-OfficialNITRR-Official
4

scroll-experience

Design scroll-driven web experiences with GSAP, Framer Motion, and CSS ScrollSnap.

Official
Advanced
leobbaronileobbaroni
1

gsap-scrolltrigger

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

Community
Intermediate
Eduardo-Sebastian-Paipay-VegaEduardo-Sebastian-Paipay-Vega

gsap

Implements complex GSAP timelines, ScrollTrigger sequences, and SVG animations in React applications.

Community
Intermediate
andersoncollabandersoncollab

scroll-animations

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

Community
Intermediate