skills.rest
imanlangaran
imanlangaranCOMMUNITY
Explore all skills by this author →
GitHub

gsap-scrolltrigger

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

1|Updated Aug 20, 2023
Search Tags:#javascript#gsap#pinning#parallax#scrolltrigger#scrub#scroll animation
One-click install
npx skills add https://github.com/imanlangaran/mini-projects --skill gsap-scrolltrigger-imanlangaran
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-scrolltrigger
Source: https://github.com/imanlangaran/mini-projects/tree/main/building-sell/.claude/skills/gsap-scrolltrigger
Command: npx skills add https://github.com/imanlangaran/mini-projects --skill gsap-scrolltrigger-imanlangaran

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. This Skill provides the correct GSAP ScrollTrigger patterns for triggering tweens on scroll, pinning sections, scrubbing animation progress to scroll position, and avoiding common mistakes like animating pinned elements or misusing containerAnimation. ## Core Features & Use Cases - Scroll-Triggered Animations: Tie tweens and timelines to scroll position with start/end triggers, toggleActions, and callbacks like onEnter and onUpdate. - Pinning and Scrubbing: Pin sections while scrolling and link animation progress directly to scroll with scrub, including smooth catch-up delays. - Horizontal Scroll and Batching: Build fake horizontal scroll sections with containerAnimation, batch element reveals with ScrollTrigger.batch(), and integrate third-party smooth scrollers via scrollerProxy(). - Use Case: A developer building a landing page wants a hero section pinned while content scrolls horizontally, with cards fading in as they enter the viewport. This Skill supplies the exact ScrollTrigger configuration, including the required ease: "none" on the horizontal tween and proper cleanup in React with useGSAP(). ## 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 ScrollTrigger plugin with gsap.registerPlugin(ScrollTrigger), then add a scrollTrigger config object to your tween or timeline. Set trigger, start, and end positions, and use toggleActions like "play reverse play reverse" to control playback when crossing boundaries.

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 pin for 1000px of scroll. Animate children of the pinned element rather than the pinned element itself, and leave pinSpacing at its default true so layout does not collapse.

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

Scrub links animation progress directly to scroll position, either instantly with true or with a catch-up delay in seconds. ToggleActions fire discrete play, pause, or reverse actions at boundaries. Do not use both on the same trigger; scrub wins if both are set.

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

How do I clean up ScrollTrigger in React?▼

Use the useGSAP() hook from the @gsap/react package, which automatically reverts ScrollTriggers and animations 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 on creation and on viewport resize, but dynamic content, images, or fonts change layout afterward. Call ScrollTrigger.refresh() after DOM changes, and create triggers in top-to-bottom page order or set refreshPriority to control refresh order.

Related Skills

Explore More Software Engineering Skills→
magicpro97magicpro97
8

gsap-scrolltrigger

Implement scroll-linked animations, pinning, scrubbing, and triggers with GSAP's ScrollTrigger plugin.

Community
Intermediate
rakibulismrakibulism
2

frontend-performance-engineer

Profile and fix frontend performance issues like jank and memory leaks.

Community
Advanced
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