skills.rest
TumeloRamaphosa
TumeloRamaphosaCOMMUNITY
Explore all skills by this author →
GitHub

gsap-scrolltrigger

Create scroll-synchronized GSAP animations with ScrollTrigger configurations.

Updated May 7, 2026
Search Tags:#timeline#react#gsap#pinning#parallax#scrolltrigger#web animations
One-click install
npx skills add https://github.com/TumeloRamaphosa/StudEx-Valley-OS --skill gsap-scrolltrigger-tumeloramaphosa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-scrolltrigger
Source: https://github.com/TumeloRamaphosa/StudEx-Valley-OS/tree/main/.claude/skills/claudedesignskills/plugins/bundles/core-3d-animation/skills/gsap-scrolltrigger
Command: npx skills add https://github.com/TumeloRamaphosa/StudEx-Valley-OS --skill gsap-scrolltrigger-tumeloramaphosa

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill solves the challenge of creating performant, scroll-synchronized web animations without hand-wiring complex GSAP timelines and ScrollTrigger configurations for every new effect.

Core Features & Use Cases

  • Scroll-driven animations with reliable start/end, scrub, and toggleActions behaviors for scroll-based reveals and transitions.
  • Timelines & sequencing to coordinate multi-step animations (including label-based timing and relative positioning).
  • Advanced patterns like pinning, parallax, horizontal scrolling, batching/staggering, image/video-like sequence scrubbing, and common integration setups (React, Three.js/WebGL, and custom scrollers).
  • Performance & stability guidance including refresh/disposal practices, render invalidation on resize, and avoiding animation pitfalls.

Quick Start

Use the gsap-scrolltrigger skill to generate a scroll-triggered parallax animation for your ".section" element that scrubs smoothly from "top bottom" to "bottom top" and pins a target ".panel" for a 500px scroll range.

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 that sync with scroll position using GSAP?▼

GSAP scroll-driven animations use the ScrollTrigger plugin to synchronize tweens and timelines with scroll position. You register ScrollTrigger with GSAP, then configure trigger, start, end, scrub, and toggleActions properties to define the scroll synchronization behavior.

Can I use GSAP ScrollTrigger with React for web animations?▼

GSAP ScrollTrigger works with React for web animations, including common integration setups. The skill provides configuration guidance for React environments, ensuring scroll-synchronized motion integrates properly within component lifecycles and rendering patterns.

What's the best way to pin elements and create parallax effects with GSAP?▼

Pinning and parallax effects with GSAP are created by configuring ScrollTrigger properties like pin and scrub. You set a trigger element, define start and end scroll positions, and enable pinning to lock elements during a specified scroll range while applying parallax motion.

How do I coordinate multi-step animation sequences in a GSAP timeline?▼

GSAP timelines coordinate multi-step animation sequences using label-based timing and relative positioning. You chain tweens within a timeline, attaching them to ScrollTrigger instances to synchronize the entire sequence to scroll progress for interactive UX motion.

Why does my GSAP ScrollTrigger animation break on window resize?▼

GSAP ScrollTrigger animations can break on window resize due to stale trigger calculations. The skill addresses this with performance and stability guidance, including render invalidation on resize and calling ScrollTrigger.refresh to recalculate positions and maintain animation accuracy.

Does GSAP ScrollTrigger support horizontal scrolling and WebGL content?▼

GSAP ScrollTrigger supports horizontal scrolling and WebGL content integration. The skill covers advanced patterns including horizontal scroll setups, Three.js/WebGL integration, and sequence scrubbing across DOM, SVG, and Canvas elements for interactive web animations.

Related Skills

Explore More Design & Creative Skills→
ayofemiadeayofemiade

gsap-scrolltrigger

Create scroll-driven web animations with GSAP and ScrollTrigger.

Community
Advanced
SharmaAnurag99SharmaAnurag99

gsap-scrolltrigger

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

Community
Intermediate
doanchienthangdevdoanchienthangdev
4

building-3d-graphics

Build 3D web scenes with Three.js and React Three Fiber.

Community
Advanced
TMR1905TMR1905

scroll-animation

Implement scroll-driven animations using CSS, Intersection Observer, and GSAP ScrollTrigger.

Community
Intermediate