skills.rest
tututwo
tututwoCOMMUNITY
Explore all skills by this author →
Website𝕏@_tuyukunGitHub

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
One-click install
npx skills add https://github.com/tututwo/heather-birthday-itenary --skill gsap-scrolltrigger-tututwo
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
nnececnnecec
2

gsap-core

Create and control GSAP core web animations with tweens and timelines.

Community
Intermediate
gyalamanch001agyalamanch001a

gsap-scrolltrigger

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

Community
Advanced
hii-saikrishnahii-saikrishna

gsap-scrolltrigger

Create scroll-triggered animations using GSAP and ScrollTrigger libraries.

Community
Advanced
markus41markus41
18

Scroll Animations Skill

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

Community
Intermediate