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

gsap

Implements and debugs GSAP web animations including timelines, ScrollTrigger, and staggered transforms.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap, and includes references (resource) components.

What problem does it solve? Building polished web animations with GSAP requires knowing the right APIs, easing patterns, and performance pitfalls, and mistakes like animating layout properties or leaking ScrollTriggers in SPAs cause jank and bugs. ## Core Features & Use Cases - Tween and Timeline Patterns: Provides ready-to-use recipes for gsap.to, gsap.from, gsap.fromTo, and chained timelines with position parameters and labels. - ScrollTrigger Integration: Covers scroll-driven animations with scrub, pin, snap, and standalone ScrollTrigger.create configurations. - Pitfall Diagnosis: Documents fixes for common issues like layout-property jank, ScrollTrigger not firing, FOUC, and missing cleanup in React/SPA apps. - Use Case: A developer building a landing page needs a staggered hero entrance and a pinned scroll-scrub section; this Skill supplies the exact timeline and ScrollTrigger code plus cleanup guidance for React. ## Quick Start Use the gsap skill to create a staggered hero entrance animation and a pinned scroll-scrub section for my landing page.

Frequently Asked Questions about gsap

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

FAQPage Schema
How do I create a staggered entrance animation with GSAP?▼

Use gsap.from with a stagger value on a group of elements, for example animating y and autoAlpha with stagger: 0.06 and ease power2.out. Stagger also supports objects with each, from, and grid options for finer control.

How to pin a section and scrub animation on scroll with ScrollTrigger?▼

Register the plugin with gsap.registerPlugin(ScrollTrigger), then create a timeline whose scrollTrigger config sets trigger, start, end, scrub, and pin: true. The timeline progress then follows scroll position between start and end.

Does GSAP work with React and other SPAs?▼

Yes, but animations must be cleaned up on unmount. Wrap animations in gsap.context and revert it in the cleanup function, or kill triggers manually with ScrollTrigger.getAll().forEach(t => t.kill()).

Why is my GSAP animation janky or laggy?▼

Jank usually comes from animating layout properties like top, left, width, or height, which force reflow. Animate transforms (x, y, scale, rotation) and opacity instead, and add will-change: transform to animated elements.

Why is ScrollTrigger not firing on my page?▼

Common causes are a missing or zero-height trigger element, or scrolling happening inside a nested overflow container that ScrollTrigger is not watching. Verify the trigger exists with height and configure the correct scroller, then call ScrollTrigger.refresh() after images load.

Related Skills

Explore More Software Engineering Skills→
lth0lth0

frontend-design

Generate production-grade HTML/CSS/JS frontend interfaces with cohesive typography, color, and motion.

Community
Advanced
mahou-labsmahou-labs
1

animate

Identify animation opportunities for UI components and micro-interactions.

Official
Advanced
doanchienthangdevdoanchienthangdev
4

profiling-performance

Run Lighthouse audits and analyze Core Web Vitals for browser performance.

Community
Intermediate
fengshao1227fengshao1227
5.9k

animate

Adds purposeful animations, micro-interactions, and motion effects to frontend features.

Community
Intermediate