skills.rest
Wayn-Git
Wayn-GitCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gsap-web

Build scroll-driven web animations with GSAP timelines, ScrollTrigger, SplitText, Flip, and Lenis smooth-scroll sync.

52|3|Updated Aug 20, 2026
Search Tags:#frontend#gsap#ScrollTrigger#lenis#splittext#web animation#scroll animation
One-click install
npx skills add https://github.com/Wayn-Git/Amethyst --skill gsap-web-wayn-git
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-web
Source: https://github.com/Wayn-Git/Amethyst/tree/main/agents/skills/gsap-web
Command: npx skills add https://github.com/Wayn-Git/Amethyst --skill gsap-web-wayn-git

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap, lenis, @gsap/react, and includes references (resource) components.

What problem does it solve? Code-driven web motion is hard to get right: sequenced timelines drift out of sync, scroll-triggered pins break under smooth-scroll libraries, text reveals flash unstyled content, and SPA route changes leak orphaned triggers. This Skill provides production-tested GSAP patterns that solve these problems directly. ## Core Features & Use Cases - Scroll-driven storytelling: Pin sections, scrub timelines to scroll position, build horizontal scroll panels, snap to sections, and batch reveal cards with ScrollTrigger. - Text and layout animation: Split headlines into lines/words/chars with SplitText for masked reveals, and animate layout changes (grid-to-list, expanding cards) with Flip. - Smooth-scroll sync: Wire Lenis or Locomotive to ScrollTrigger on a single GSAP ticker loop, eliminating jitter, marker drift, and broken pins, with a full symptom-to-cause debugging table. - Verifiable deliverables: Produce a standalone HTML file with one master timeline and a ?t=N seek harness so any frame can be frozen and screenshotted for review. - Use Case: A designer asks for a hero section where the headline reveals line-by-line, then a pinned horizontal scroll of product panels. The Skill supplies the timeline structure, SplitText setup, ScrollTrigger pinning code, and Lenis integration, plus cleanup patterns for React. ## Quick Start Ask the agent to build a scroll animation with GSAP, for example: create a hero entrance timeline with SplitText line reveals and a pinned horizontal scroll section synced to Lenis smooth scrolling.

Frequently Asked Questions about gsap-web

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

FAQPage Schema
How do I pin a section and scrub an animation with ScrollTrigger?▼

Create a timeline with a scrollTrigger config setting trigger, start: "top top", end: "+=N" pixels, pin: true, and scrub: 1. Use ease: "none" on scrubbed tweens so motion tracks scroll linearly, and set anticipatePin: 1 to reduce jump on fast scrolls.

How to sync Lenis smooth scroll with GSAP ScrollTrigger?▼

Subscribe ScrollTrigger.update to lenis.on("scroll"), drive Lenis from gsap.ticker with lenis.raf(time * 1000), and set gsap.ticker.lagSmoothing(0). Never run a separate requestAnimationFrame loop for Lenis, since two competing loops cause jitter and desync.

Why do ScrollTrigger pins break when using Lenis or Locomotive?▼

Under Lenis, pins break if you set a scrollerProxy, because Lenis scrolls the real document and needs none. Under Locomotive you must wire scrollerProxy with the correct pinType and set scroller on every trigger, since it scrolls an inner element.

Does SplitText work correctly before web fonts load?▼

No, splitting before fonts load produces wrong line breaks. Wrap the split in document.fonts.ready.then(...) and add autoSplit: true in GSAP 3.13+ so it re-splits on font swap or resize. Call split.revert() before re-splitting or on unmount.

How do I clean up GSAP animations in React or SPAs?▼

Wrap all GSAP and ScrollTrigger code in gsap.context() and call ctx.revert() on unmount, or use useGSAP from @gsap/react with a scope ref, which auto-reverts. Also remove ticker callbacks and call lenis.destroy() so loops do not stack across route changes.

What CSS properties should I animate with GSAP for best performance?▼

Animate only transform properties (x, y, xPercent, scale, rotation) and opacity, which are GPU-composited and skip layout and paint. Avoid animating top, left, width, or height, and use will-change: transform on heavy or pinned elements, removing it afterward.

Related Skills

Explore More Software Engineering Skills→
PelekePeleke

design-pass

Apply tiered CSS and SVG styling to Slidev decks and landing pages.

Community
Intermediate
fyndxfyndx
1

reanimated

Create animations and gesture interactions in React Native apps.

Official
Intermediate
AlexDevFlowAlexDevFlow

fixing-motion-performance

Audit and fix CSS and JavaScript animation performance issues.

Community
Advanced
Camilo8902Camilo8902

framer-motion-animator

Generate Framer Motion animations for web applications with page transitions and scroll effects.

Community
Intermediate