skills.rest
ankaboot-source
ankaboot-sourceOFFICIAL
Explore all skills by this author →
WebsiteGitHub

gsap-scrolltrigger

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

2|Updated Jul 25, 2026
Search Tags:#frontend#gsap#pinning#parallax#scrolltrigger#scrub#scroll animation
One-click install
npx skills add https://github.com/ankaboot-source/boucle --skill gsap-scrolltrigger-ankaboot-source
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-scrolltrigger
Source: https://github.com/ankaboot-source/boucle/tree/main/.jcode/skills/gsap-scrolltrigger
Command: npx skills add https://github.com/ankaboot-source/boucle --skill gsap-scrolltrigger-ankaboot-source

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? Building scroll-driven animations by hand requires manual scroll event handling, position math, and cleanup logic that is error-prone and hard to maintain. This Skill provides the correct GSAP ScrollTrigger patterns for triggering, scrubbing, and pinning animations tied to scroll position. ## Core Features & Use Cases - Scroll-Linked Animations: Trigger tweens and timelines at precise scroll positions using start/end, toggleActions, and scrub configuration. - Pinning and Horizontal Scroll: Pin sections during scroll and build fake horizontal scroll experiences with containerAnimation. - 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 elements 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 down the page.

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?▼

Add a scrollTrigger config object to a gsap.to() tween or timeline with trigger, start, and end properties. Register the plugin first with gsap.registerPlugin(ScrollTrigger), then use toggleActions for play/reverse behavior or scrub to link progress to scroll position.

How to pin a section while scrolling with 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 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().forEach(t => t.kill()).

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 synchronization between vertical scroll and horizontal position.

Why do ScrollTrigger positions break after loading content dynamically?▼

ScrollTrigger calculates positions at creation time, so new content, images, or fonts shift trigger positions. Call ScrollTrigger.refresh() after DOM or layout changes; viewport resize is handled automatically but dynamic content is not.

Should I use scrub or toggleActions for scroll animations?▼

Use scrub when animation progress should follow scroll position continuously, and toggleActions for discrete play/reverse behavior at scroll boundaries. Never combine both on the same ScrollTrigger; if both exist, scrub wins.

Related Skills

Explore More Software Engineering Skills→
ScarletFishScarletFish

gsap-scrolltrigger

Synchronize GSAP tweens and timelines with browser scroll position.

Community
Intermediate
yonetim258852yonetim258852

barba-js

Coordinate Barba.js navigation events, content fetching, and GSAP container animations.

Community
Advanced
calesthiocalesthio
55.1k

gsap-scrolltrigger

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

Community
Intermediate
andersoncollabandersoncollab

scroll-animations

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

Community
Intermediate