skills.rest
hanzoai
hanzoaiOFFICIAL
Explore all skills by this author →
Website𝕏@hanzoaiGitHub

gsap-scrolltrigger

Link GSAP animations to scroll events with ScrollTrigger.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Scroll-based user interfaces often require synchronizing animations with the page's scroll position. This skill provides a robust API to tie GSAP animations to scrolling, enabling parallax, pinning, scrubbing, and timeline-based interactions.

Core Features & Use Cases

  • Trigger-based animations: tie tweens and timelines to scroll using a trigger, start, end, and options.
  • Scrub and pin: sync animation progress with scroll movement and pin elements during active ranges.
  • Batch and proxy: use ScrollTrigger.batch for grouped callbacks and ScrollTrigger.scrollerProxy for non-native scroll containers.
  • Development & patterns: markers for debugging, horizontal scroll via containerAnimation, and timeline-driven scroll experiences.
  • Best practices: refresh on layout changes, clean up in SPAs, and register plugins before use.

Quick Start

Attach a ScrollTrigger to a GSAP tween or timeline with a trigger, define start and end, and optionally enable scrub or pin to create a scroll-driven animation.

Frequently Asked Questions about gsap-scrolltrigger

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

FAQPage Schema
How do I create scroll-driven animations linked to page scroll position?▼

Scroll-driven animations link GSAP tweens to page scroll position by registering the ScrollTrigger plugin and specifying a trigger element with start and end points to synchronize interactivity with scrolling.

How do I pin an element while scrolling through a specific section?▼

Pinning elements during scroll requires applying the pin property within ScrollTrigger options, locking the specified element in place while the page scrolls through the defined start and end range.

How do I scrub GSAP animations so progress is tied to scroll movement?▼

Scrubbing ties animation progress directly to scroll movement by enabling the scrub property in ScrollTrigger, allowing users to move forward and backward through the animation timeline by scrolling up and down.

Can I use ScrollTrigger for horizontal scrolling layouts?▼

Horizontal scroll animations are supported by using the containerAnimation property, which links ScrollTrigger to a horizontal timeline to enable scroll-driven interactivity across horizontal layouts.

Does ScrollTrigger work with non-native scroll containers?▼

ScrollTrigger works with non-native scroll containers by using the scrollerProxy method, which integrates custom scrolling logic and maps coordinates for accurate scroll-driven animation triggering.

How do I debug scroll-based animation trigger points during development?▼

Debugging scroll animation trigger points is done by enabling the markers property in ScrollTrigger, which visually displays start, end, and trigger indicators on the page during development.

Related Skills

Explore More Software Engineering Skills→
yequdesuyequdesu

gsap-scrolltrigger

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

Community
Advanced
SharmaAnurag99SharmaAnurag99

gsap-scrolltrigger

Create scroll-driven animations and pin elements with GSAP ScrollTrigger.

Community
Intermediate
fyunusafyunusa

gsap-scrolltrigger

Implement GSAP and ScrollTrigger animations for scroll-driven web storytelling.

Community
Advanced
markus41markus41
18

Scroll Animations Skill

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

Community
Intermediate