skills.rest
abhinaaaavvv
abhinaaaavvvCOMMUNITY
Explore all skills by this author →
Website𝕏@abhinaaaavvvGitHub

gsap-scrolltrigger

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? Building scroll-driven animations in JavaScript requires manually tracking scroll positions, calculating trigger points, and synchronizing animation progress, which is error-prone and verbose. This Skill provides the correct GSAP ScrollTrigger patterns for triggering tweens on scroll, pinning sections, scrubbing timelines to scroll position, and handling cleanup in frameworks like React. ## Core Features & Use Cases - Scroll-Triggered Animations: Tie tweens and timelines to scroll position using start/end triggers, toggleActions, and callbacks like onEnter and onUpdate. - Pinning and Scrubbing: Pin elements during a scroll range with pinSpacing control, and link animation progress directly to scroll with scrub for smooth scroll-driven motion. - Advanced Patterns: Implement fake horizontal scroll with containerAnimation, batch element reveals with ScrollTrigger.batch(), and integrate third-party smooth-scroll libraries via scrollerProxy(). - Use Case: A developer building a landing page wants a section to pin while its content animates horizontally as the user scrolls vertically, with cards fading in as they enter the viewport. ## 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 ScrollTrigger plugin with gsap.registerPlugin(ScrollTrigger), then add a scrollTrigger config object to your tween or timeline. Set trigger, start, and end to define when the animation activates, and use toggleActions or scrub to control playback behavior.

How to pin an element while scrolling with GSAP ScrollTrigger?▼

Set pin: true in the scrollTrigger config to pin the trigger element while the scroll range is active. Use end: "+=1000" to control pin duration and keep pinSpacing at its default true so the layout does not collapse.

What is the difference between scrub and toggleActions in ScrollTrigger?▼

Scrub links animation progress directly to scroll position, while toggleActions fires discrete play, reverse, or pause actions at trigger boundaries. Do not use both on the same ScrollTrigger; if both exist, scrub wins.

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

The horizontal tween used with containerAnimation must have ease: "none" so scroll position maps one-to-one with horizontal movement. Any other ease breaks the synchronization between vertical scroll and horizontal position.

How do I clean up ScrollTrigger in React?▼

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 with ScrollTrigger.getAll().forEach(t => t.kill()) or ScrollTrigger.getById(id).kill().

Why are my ScrollTrigger positions wrong after loading content?▼

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

Related Skills

Explore More Software Engineering Skills→
DanielV-94DanielV-94

gsap-timeline

Sequence GSAP tweens with timelines, position parameters, and labels.

Community
Intermediate
hanzoaihanzoai

gsap-react

Implement GSAP animations in React with useGSAP and automatic cleanup.

Official
Intermediate
karenrebecagkarenrebecag

gsap-scrolltrigger

Implement GSAP ScrollTrigger for scroll-driven animations in web development.

Community
Intermediate
coastdigitalgroupcoastdigitalgroup
2

scroll-reveal-implementation

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

Official
Intermediate