skills.rest
JenilRevaliya
JenilRevaliyaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gsap-expert

Implements GSAP 3 animations including tweens, timelines, ScrollTrigger, and React useGSAP integration.

Updated Apr 13, 2026
Search Tags:#timeline#frontend#react#animation#gsap#scrolltrigger#usegsap
One-click install
npx skills add https://github.com/JenilRevaliya/ARGUS --skill gsap-expert-jenilrevaliya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap-expert
Source: https://github.com/JenilRevaliya/ARGUS/tree/main/.agent/skills/gsap-expert
Command: npx skills add https://github.com/JenilRevaliya/ARGUS --skill gsap-expert-jenilrevaliya

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap, @gsap/react.

What problem does it solve? Writing GSAP animations often leads to subtle bugs: GSAP 2 syntax leftovers, missing plugin registration, layout-thrashing properties, and React cleanup issues. This Skill provides a dense, hallucination-proof reference for GSAP 3.12+ so generated animation code is correct on the first pass. ## Core Features & Use Cases - Correct-by-default patterns: Covers core tweens, timelines with position parameters, stagger configs, and the mandatory gsap.registerPlugin calls. - Scroll-driven animation: ScrollTrigger setup with scrub, pin, batch for lists, and mandatory cleanup on SPA route changes. - React integration: useGSAP hook usage with scoping, dependencies, and gsap.matchMedia for responsive and reduced-motion animations. - Use Case: Building a landing page with a pinned scroll storytelling section, staggered card reveals, and a hero timeline — all in a Next.js client component without shipping debug markers or animating layout properties. ## Quick Start Ask the AI to create a scroll-triggered staggered card reveal animation in a React component using GSAP and the useGSAP hook.

Frequently Asked Questions about gsap-expert

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

FAQPage Schema
How do I use GSAP with React?▼

Use the useGSAP hook from @gsap/react instead of raw useEffect. It automatically scopes selectors to a container ref and handles cleanup on unmount. Register plugins like ScrollTrigger once at module level, outside the component.

How to create scroll-triggered animations with GSAP ScrollTrigger?▼

Register ScrollTrigger with gsap.registerPlugin, then pass a scrollTrigger config object with trigger, start, end, scrub, and pin options to your tween or timeline. For lists, use ScrollTrigger.batch to create one instance per group instead of per item.

Does GSAP work in Next.js Server Components?▼

No, GSAP is browser-only and requires the "use client" directive in Next.js. Place all GSAP code inside client components, ideally within the useGSAP hook so it runs after the DOM is available.

Why is my GSAP animation causing layout jank?▼

Animating width, height, top, left, padding, or margin triggers layout and paint on every frame. Animate only GPU-composited properties like x, y, scale, rotation, and opacity, and set willChange: "transform" on animated elements.

What is the difference between GSAP 2 and GSAP 3 syntax?▼

GSAP 3 uses string eases like "power2.inOut" instead of GSAP 2's Power2.easeOut objects. Timelines take position as the third argument, and plugins must be explicitly registered with gsap.registerPlugin before use.

How do I handle reduced motion preferences in GSAP?▼

Use gsap.matchMedia with the prefers-reduced-motion media query. In the reduce branch, use gsap.set to apply final states instantly instead of animating, keeping content accessible without motion.

Related Skills

Explore More Software Engineering Skills→
abhinaaaavvvabhinaaaavvv

gsap-react

Implements GSAP animations in React using the useGSAP hook with scoped selectors and automatic cleanup.

Community
Intermediate
gwpjpgwpjp
3

visual-qa-chrome-profiler

Profile production page performance with Chrome DevTools to identify browser-level bottlenecks.

Community
Advanced
RSHVRRSHVR
1

elite-accessibility

Apply motion accessibility patterns to CSS and GSAP web animations.

Community
Advanced
nattergabrielnattergabriel
2

animations

Animate Mars Greenhouse UI elements with CSS keyframes and Framer Motion variants.

Community
Intermediate