gsap-scrolltrigger

Implement scroll-driven GSAP ScrollTrigger animations across React, Svelte, or vanilla projects.

Updated Apr 28, 2026

Search Tags:#frontend #animations #gsap #pinning #scrolltrigger #web-animation #scrub

Ready to run

npx skills add https://github.com/tututwo/heather-birthday-itenary --skill gsap-scrolltrigger-tututwo

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: gsap-scrolltrigger
Source: https://github.com/tututwo/heather-birthday-itenary/tree/main/.agents/skills/gsap-scrolltrigger
Command: npx skills add https://github.com/tututwo/heather-birthday-itenary --skill gsap-scrolltrigger-tututwo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a structured approach to implementing scroll-driven animations using GSAP ScrollTrigger, reducing timing guesswork and cross-framework inconsistencies.

Core Features & Use Cases

Trigger tweens and timelines on scroll with precise start/end, including pinning and scrubbing.
Support horizontal scrolling patterns via containerAnimation and compatibility with React, Svelte, or vanilla JS.
See practical use cases across dashboards, storytelling UIs, and long-form content with dynamic sections.

Quick Start

Install GSAP, register the ScrollTrigger plugin, and apply a basic scrollTrigger to a target element.

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 with GSAP ScrollTrigger?▼

GSAP ScrollTrigger creates scroll-driven animations by triggering tweens and timelines based on scroll position. You configure start and end points to precisely control when animations activate, enabling reliable pinning and scrubbing behavior.

Does GSAP ScrollTrigger work with React and Svelte?▼

Yes, GSAP ScrollTrigger works with React, Svelte, and vanilla JS projects. It provides a structured approach that reduces cross-framework inconsistencies, ensuring reliable scroll animation behavior across different frontend environments.

How do I implement horizontal scrolling using GSAP ScrollTrigger?▼

Implement horizontal scrolling in GSAP ScrollTrigger using the containerAnimation feature. This allows you to drive horizontal movement through vertical scroll input, creating dynamic storytelling UIs and long-form content sections.

Why do my GSAP ScrollTrigger pinning and scrubbing animations misfire?▼

GSAP ScrollTrigger pinning and scrubbing animations misfire due to improper plugin registration or unsafe configuration. Enforcing best practices for refresh, markers, and scrollerProxy usage ensures predictable, performant behavior.

What is the best way to configure GSAP ScrollTrigger for dynamic web sections?▼

The best way to configure GSAP ScrollTrigger for dynamic web sections is by applying precise start and end triggers with proper refresh handling. This reduces timing guesswork and ensures animations perform predictably across dashboards and long-form content.