skills.rest
Eduardo-Sebastian-Paipay-Vega
Eduardo-Sebastian-Paipay-VegaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gsap

Implements complex GSAP timelines, ScrollTrigger sequences, and SVG animations in React applications.

Updated May 13, 2026
Search Tags:#timeline#frontend#react#animation#gsap#parallax#scrolltrigger
One-click install
npx skills add https://github.com/Eduardo-Sebastian-Paipay-Vega/Documentaci-n_de_dise-o_de_Sistemas_y_Modulos --skill gsap-eduardo-sebastian-paipay-vega
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap
Source: https://github.com/Eduardo-Sebastian-Paipay-Vega/Documentaci-n_de_dise-o_de_Sistemas_y_Modulos/tree/main/GIMNASIO/.claude/skills/gsap
Command: npx skills add https://github.com/Eduardo-Sebastian-Paipay-Vega/Documentaci-n_de_dise-o_de_Sistemas_y_Modulos --skill gsap-eduardo-sebastian-paipay-vega

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap, @gsap/react.

What problem does it solve? Framer Motion cannot elegantly handle complex multi-step animation sequences, SVG path drawing, scroll-driven parallax, or high-performance animations on non-React elements, leaving developers without guidance for these scenarios. ## Core Features & Use Cases - Complex Timeline Orchestration: Build multi-step animation sequences with labels, staggered offsets, and programmatic play/pause controls using gsap.timeline(). - ScrollTrigger Integration: Create pinned storytelling sections, horizontal scroll containers, parallax layers, and scroll-revealed elements with scrub and snap behavior. - React Integration via useGSAP: Scope animations to components with automatic cleanup on unmount using the official @gsap/react hook. - Use Case: Build a landing page hero where the badge, headline, subtitle, and CTA animate in a choreographed sequence, followed by a pinned three-step product story that scrubs with scroll position. ## Quick Start Install gsap and @gsap/react, then ask the AI to create a staggered hero entrance timeline and a pinned ScrollTrigger section for your React component.

Frequently Asked Questions about gsap

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

FAQPage Schema
When should I use GSAP instead of Framer Motion?▼

Use GSAP for complex multi-step timelines, SVG path drawing and morphing, scroll-driven parallax, text scramble effects, and animations on non-React DOM elements. Framer Motion remains better for simple React component animations, gestures, layout animations, and spring physics.

How do I use GSAP in a React component?▼

Install @gsap/react and wrap your GSAP code in the useGSAP hook with a scope ref pointing to a container element. The hook automatically cleans up animations and ScrollTriggers when the component unmounts, preventing memory leaks and selector collisions.

How do I create a pinned scroll section with GSAP ScrollTrigger?▼

Create a timeline with a scrollTrigger config setting trigger to your section, start to "top top", end to "+=300%", pin to true, and scrub to 1. The element stays fixed while timeline steps play in sync with scroll position.

Why is my GSAP animation causing layout reflow and poor performance?▼

Animating layout properties like width or height forces browser reflow. Animate transform-based properties like scaleX, x, and y instead, and set force3D and willChange to keep animations on the GPU compositor thread.

Does GSAP work alongside Framer Motion in the same project?▼

Yes, GSAP and Framer Motion coexist without conflict. Use Framer Motion for component-level interactions and GSAP for complex timelines and ScrollTrigger orchestration, keeping each library scoped to its own elements.

Related Skills

Explore More Software Engineering Skills→
darkroomengineeringdarkroomengineering
41

lenis

Set up Lenis smooth scroll in Next.js/React projects with provider and useLenis hook.

Official
Intermediate
doanchienthangdevdoanchienthangdev
4

profiling-performance

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

Community
Intermediate
anis-marrouchianis-marrouchi

motion-animation

Integrate Framer Motion with Remotion for frame-synced animations.

Community
Intermediate
Adham7843Adham7843

scroll-reveal-libraries

Add scroll-triggered reveal animations to web elements with Animate On Scroll.

Community
Basic