skills.rest
langgenius
langgeniusOFFICIAL
Explore all skills by this author →
Website𝕏@dify_aiGitHub

gsap-web

Builds GSAP timelines, ScrollTrigger scenes, SplitText reveals, and Lenis smooth-scroll sync for web motion.

3|Updated Apr 20, 2026
Search Tags:#frontend#gsap#lenis#scrolltrigger#splittext#web animation#smooth scroll
One-click install
npx skills add https://github.com/langgenius/due-date-hq-jwl --skill gsap-web-langgenius
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-web
Source: https://github.com/langgenius/due-date-hq-jwl/tree/main/.claude/skills/gsap-web
Command: npx skills add https://github.com/langgenius/due-date-hq-jwl --skill gsap-web-langgenius

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Code-driven web animation with GSAP involves many subtle pitfalls: unregistered plugins silently no-op, Lenis smooth scrolling desyncs from ScrollTrigger causing jitter and drifting markers, SplitText breaks lines incorrectly before fonts load, and orphaned triggers leak memory in SPAs. This Skill provides correct, production-tested patterns for each of these problems. ## Core Features & Use Cases - Timelines and ScrollTrigger: Sequenced timelines with position parameters, pinned scroll sections, scrubbed animations, horizontal scroll, snap, and batch reveals. - Smooth-scroll sync: Canonical Lenis/Locomotive wiring with GSAP's ticker, including the seconds-to-milliseconds conversion, lagSmoothing(0), scrollerProxy for Locomotive, and a symptom-to-cause debugging table. - SplitText and Flip: Line/word text reveals with font-load handling and layout transitions using the FLIP technique. - Verifiable deliverables: A standalone HTML template with a ?t=N seek harness so any animation frame can be frozen and screenshotted for review. - Use Case: A developer needs a pinned horizontal-scroll section synced with Lenis smooth scrolling in a React app; the Skill supplies the exact wiring, cleanup logic, and reduced-motion gating. ## Quick Start Ask the assistant to build a scroll-driven hero animation with GSAP ScrollTrigger and Lenis smooth scrolling, delivered as a single standalone HTML file.

Frequently Asked Questions about gsap-web

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

FAQPage Schema
How do I 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.

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

Attach a scrollTrigger config to the tween or timeline with trigger, start: 'top top', end: '+=2000', pin: true, and scrub: 1. Use ease: 'none' on scrubbed tweens so motion tracks scroll linearly, and add anticipatePin: 1 to reduce jump on fast scrolls.

Why are my ScrollTrigger markers drifting when using Lenis?▼

Marker drift means ScrollTrigger.update is not subscribed to lenis.on('scroll'), so triggers track native scroll while content moves with smoothed scroll. Adding that one subscription realigns markers, triggers, and pins with the smoothed position.

Does GSAP ScrollTrigger work with React and Next.js?▼

Yes. Use the useGSAP hook from @gsap/react with a scoped ref, which automatically reverts tweens and ScrollTriggers on unmount. For Lenis, also remove the ticker callback and call lenis.destroy() in the cleanup function to prevent stacked loops across route changes.

Why does SplitText break lines incorrectly on my page?▼

SplitText computes line breaks from current layout, so splitting before web fonts load produces wrong breaks. Split inside document.fonts.ready.then(...), and enable autoSplit: true in GSAP 3.13+ to re-split automatically on font load or resize.

When should I use CSS animations instead of GSAP?▼

CSS transitions suit simple hover states and single-property changes. GSAP is the better fit for sequenced multi-element timelines, scroll-driven scrubbing and pinning, text splitting, layout transitions with Flip, and any motion needing precise timing or imperative control.

Related Skills

Explore More Software Engineering Skills→
davila7davila7
30.5k

scroll-experience

Implements scroll-driven animations, parallax storytelling, and sticky sections using GSAP, Framer Motion, and CSS.

Community
Intermediate
PlayableIntelligencePlayableIntelligence
307

game-deploy

Deploy browser games to here.now, GitHub Pages, Vercel, or Netlify.

Official
Advanced
arinhubcomarinhubcom

ah-check-qa

Automate UI QA with visual, accessibility, and performance checks across viewports.

Official
Advanced
DanielV-94DanielV-94

animation-designer

Create web UI animations with Framer Motion, CSS keyframes, and GSAP.

Community
Intermediate