skills.rest
DITEKmax
DITEKmaxCOMMUNITY
Explore all skills by this author →
GitHub

gsap-scrolltrigger

Implement GSAP ScrollTrigger scroll-linked animations with pinning and scrubbed timelines.

Updated Mar 28, 2026
Search Tags:#gsap#pinning#scrolltrigger#scrub#scroll-animation#horizontal-scroll#scroller-proxy
One-click install
npx skills add https://github.com/DITEKmax/rutcampustrack --skill gsap-scrolltrigger-ditekmax
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-scrolltrigger
Source: https://github.com/DITEKmax/rutcampustrack/tree/main/.agents/skills/gsap-scrolltrigger
Command: npx skills add https://github.com/DITEKmax/rutcampustrack --skill gsap-scrolltrigger-ditekmax

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web developers building scroll-linked animations often face tricky timing, pinning, scrub sync, and integration issues with custom scrollers; this Skill consolidates ScrollTrigger configuration, patterns, and caveats to produce reliable scroll-driven animations and avoid common mistakes.

Core Features & Use Cases

  • Triggered Animations & Timelines: Tie tweens or timelines to scroll ranges with precise start/end control and toggle behaviors for enter/leave events.
  • Pinning & Scrubbed Progress: Pin elements during scroll ranges and optionally scrub animation progress to create a 1:1 or eased scroll-driven playback.
  • Batching & Performance: Use ScrollTrigger.batch to efficiently reveal groups of elements with staggered animations instead of expensive per-element handlers.
  • Scroller Integration & Horizontal Scroll: Integrate third-party smooth scrollers with scrollerProxy and implement fake horizontal scroll patterns via containerAnimation and ease: "none".
  • Lifecycle & SPA Safety: Best practices for registering the plugin once, calling ScrollTrigger.refresh after layout changes, and killing triggers on teardown to prevent leaks in single-page apps.

Quick Start

Use gsap-scrolltrigger to implement a pinned section with a scrubbed timeline, ensure gsap.registerPlugin(ScrollTrigger) runs once, and call ScrollTrigger.refresh() after dynamic layout changes.

Frequently Asked Questions about gsap-scrolltrigger

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I pin an element and scrub a GSAP timeline as the user scrolls?▼

To pin and scrub scroll animations with GSAP, you configure a ScrollTrigger instance with the pin property set to true and the scrub property linked to your timeline, binding animation progress directly to the scroll range.

Why are my GSAP ScrollTrigger animations misaligned after dynamic layout changes?▼

GSAP ScrollTrigger animations become misaligned after dynamic layout changes because start and end positions are cached, requiring an explicit call to ScrollTrigger.refresh() to recalculate trigger ranges and restore correct sync.

What is the best way to reveal multiple elements on scroll without hurting performance?▼

The best way to batch reveal multiple elements on scroll is using ScrollTrigger.batch, which efficiently groups staggered animations instead of relying on expensive per-element event handlers to trigger individually.

Can I use GSAP ScrollTrigger with a third-party smooth scroll library?▼

Yes, you can integrate third-party smooth scrollers with GSAP ScrollTrigger by using the scrollerProxy method, which maps the custom scroll mechanics to the ScrollTrigger listener and ensures proper viewport synchronization.

How do I create a fake horizontal scrolling section using GSAP?▼

You create fake horizontal scrolling by using containerAnimation to tie a vertical scroll range to a horizontal tween, applying ease: none to maintain a direct 1:1 scrubbed progress ratio with the scroll bar.

How do I prevent ScrollTrigger memory leaks in a single-page application?▼

To prevent ScrollTrigger memory leaks in a single-page application, you must kill active triggers during component teardown and ensure the plugin is registered only once globally to avoid duplicating listener overhead.

Related Skills

Explore More Software Engineering Skills→
47thtechcorner47thtechcorner
21

gsap-scrolltrigger

Implement scroll-linked animations and pinning with GSAP ScrollTrigger.

Community
Intermediate
SafiNguyenSafiNguyen

gsap-react

Integrate GSAP animations into React and Next.js with useGSAP cleanup.

Community
Intermediate
gyalamanch001agyalamanch001a

gsap-scrolltrigger

Build scroll-linked animations with GSAP ScrollTrigger for pinning, scrubbing, and viewport reveals.

Community
Advanced
markus41markus41
18

Scroll Animations Skill

Implement scroll-triggered animations and parallax effects with Framer Motion or GSAP.

Community
Intermediate