skills.rest
josippapez
josippapezCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gsap

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

Updated May 5, 2026
Search Tags:#timeline#react#javascript#motion design#gsap#scrolltrigger#web animation
One-click install
npx skills add https://github.com/josippapez/ai-setup --skill gsap-josippapez
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap
Source: https://github.com/josippapez/ai-setup/tree/main/claude/plugins/better-design/skills/gsap
Command: npx skills add https://github.com/josippapez/ai-setup --skill gsap-josippapez

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap.

What problem does it solve? Building polished web animations with GSAP requires knowing the right APIs, easing patterns, and performance pitfalls; this Skill provides the patterns and fixes needed to add or debug professional motion in HTML/CSS/JS/React projects. ## Core Features & Use Cases - Tween and Timeline Patterns: Covers gsap.to, gsap.from, gsap.fromTo, timeline chaining, position parameters, eases, and staggers for orchestrated sequences. - ScrollTrigger Integration: Provides scroll-driven animation setups with scrub, pin, snap, and markers, plus standalone ScrollTrigger.create usage. - Pitfall Remediation: Diagnoses jank from layout-property animation, ScrollTrigger not firing, SPA cleanup with gsap.context, and FOUC from early measurement. - Use Case: A React developer needs a hero entrance with staggered elements and a pinned scroll-scrubbed story section; the Skill supplies ready recipes and cleanup guidance for unmounting. ## Quick Start Use the gsap skill to create a staggered hero entrance animation and a pinned ScrollTrigger section for my React 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 targets, for example gsap.from('.hero [data-anim]', { y: 24, autoAlpha: 0, stagger: 0.06 }). Stagger also accepts an object with each, from, and grid options for finer control.

How do I pin a section and scrub animations on scroll with ScrollTrigger?▼

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

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.

How do I clean up GSAP animations in React to avoid memory leaks?▼

Wrap animations in gsap.context() and call its revert method on component unmount. You can also kill triggers manually with ScrollTrigger.getAll().forEach(t => t.kill()) when tearing down a page.

Why is my ScrollTrigger not firing?▼

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, configure the scroller for nested containers, and call ScrollTrigger.refresh() after images load.

Related Skills

Explore More Design & Creative Skills→
Probably-GroupProbably-Group
3

gsap

Guide GSAP implementations with safe DOM targeting and structured orchestration.

Official
Advanced
mahou-labsmahou-labs
1

animate

Identify animation opportunities for UI components and micro-interactions.

Official
Advanced
fanguyunfanguyun

gsap-performance

Optimize GSAP animations by reducing layout thrashing and using transforms.

Community
Advanced
beardcoderbeardcoder

css-animate

Create composited CSS animations with scroll-driven effects and reduced-motion fallbacks.

Community
Advanced