skills.rest
NalinDalal
NalinDalalCOMMUNITY
Explore all skills by this author →
Website𝕏@nalin82929GitHub

gsap-scrolltrigger

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

1|Updated Aug 17, 2026
Search Tags:#javascript#gsap#pinning#parallax#ScrollTrigger#scrub#scroll animation
One-click install
npx skills add https://github.com/NalinDalal/skillset --skill gsap-scrolltrigger-nalindalal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-scrolltrigger
Source: https://github.com/NalinDalal/skillset/tree/main/skills/ui/gsap-scrolltrigger
Command: npx skills add https://github.com/NalinDalal/skillset --skill gsap-scrolltrigger-nalindalal

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? Building scroll-driven animations like parallax, pinned sections, and scroll-scrubbed timelines requires precise control over trigger positions, viewport calculations, and cleanup logic that is easy to get wrong without guidance. ## Core Features & Use Cases - Scroll-Linked Animations: Tie tweens and timelines to scroll position with configurable start/end points, toggleActions, and scrub smoothing. - Pinning & Horizontal Scroll: Pin sections during scroll ranges and build fake horizontal scroll experiences using containerAnimation with ease: "none". - Batching & Integration: Use ScrollTrigger.batch() for staggered viewport reveals 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 provides the correct pinned trigger, xPercent tween, and containerAnimation wiring with proper cleanup. ## Quick Start Use the gsap-scrolltrigger skill to pin a section and scrub 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 an element while scrolling with ScrollTrigger?▼

Set pin: true in the scrollTrigger config and define an end value like "+=1000" to pin for 1000px of scroll. pinSpacing defaults to true, adding a spacer so 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 on unmount. Alternatively, kill instances manually in a useEffect cleanup via ScrollTrigger.getAll() or ScrollTrigger.getById().

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

The horizontal tween driving a containerAnimation must use ease: "none" so scroll position maps 1:1 to horizontal movement. Any other ease breaks the alignment, which is a very common mistake in fake horizontal scroll setups.

Why do ScrollTrigger positions break 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.

Related Skills

Explore More Software Engineering Skills→
aesthezelaesthezel
8

gsap-core

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

Community
Advanced
leobbaronileobbaroni
1

gsap

Implements GSAP animations including timelines, ScrollTrigger, and plugins for web interfaces.

Community
Intermediate
aungpwintaungpwint

gsap-scrolltrigger

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

Community
Intermediate
coastdigitalgroupcoastdigitalgroup
2

scroll-reveal-implementation

Trigger viewport-based entrance animations using IntersectionObserver with reduced-motion fallbacks.

Official
Intermediate