skills.rest
MengTo
MengToCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gsap

Create and debug GSAP tweens, timelines, and ScrollTrigger animations.

4.5k|536|Updated Feb 3, 2026
Search Tags:#gsap#stagger#scrolltrigger#timelines#web animation#react performance#frontend motion
One-click install
npx skills add https://github.com/MengTo/Skills --skill gsap-mengto
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gsap
Source: https://github.com/MengTo/Skills/tree/main/agent-skills/web-design/gsap
Command: npx skills add https://github.com/MengTo/Skills --skill gsap-mengto

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you design and debug complex web animations that stay smooth and reliable, especially when orchestrating multiple elements and scroll interactions.

Core Features & Use Cases

  • Timeline-based animation orchestration: chain tweens and sequences with gsap.timeline() for consistent motion across many UI elements.
  • Scroll-driven storytelling with ScrollTrigger: configure trigger/start/end/scrub/pin/snap/markers to create pinned sections and scrubbed animations.
  • Performance-first motion patterns: prefer transform-based properties and autoAlpha to reduce layout jank, plus recipes for common entrance and sequencing workflows.

Quick Start

Use the gsap skill to implement a staggered hero entrance and a ScrollTrigger-based pinned section for your page, then ask it to point out any likely performance or SPA/React cleanup pitfalls.

Frequently Asked Questions about gsap

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

FAQPage Schema
How do I create scroll-driven animations with pinned sections using GSAP?▼

To create scroll-driven animations, use the GSAP ScrollTrigger plugin to configure trigger, start, end, scrub, and pin properties. This allows you to build pinned sections and scrubbed animations that tie visual progress directly to scroll position.

How do I chain multiple web animations together in a sequence?▼

Chain multiple web animations into a sequence using the gsap.timeline() API. This orchestrates tweens to play consistently across many UI elements, ensuring precise timing for entrances, micro-interactions, and page transitions.

Can I use GSAP for animations in React and other SPA frameworks?▼

Yes, GSAP works with React and SPA frameworks for entrances and page transitions. The implementation includes SPA cleanup guidance to prevent memory leaks and context issues when components unmount during timeline-driven interactions.

How do I fix web animation performance jank and layout shifts?▼

Fix web animation performance jank by prioritizing transform-based properties and autoAlpha instead of animating layout-triggering CSS. This performance-first motion pattern reduces browser reflow and maintains smooth frame rates.

What is the best way to build a staggered hero entrance animation?▼

The best way to build a staggered hero entrance is using GSAP's from or fromTo methods to animate elements sequentially. This approach applies performance-safe properties to create smooth, reliable entrance workflows.

Related Skills

Explore More Software Engineering Skills→
tarrragontarrragon

Frontend with Playwright — SKILL 入口

Validate frontend DOM/CSS/JS interactions using Playwright across vanilla and frameworks.

Community
Advanced
AlejandroFiginiAlejandroFigini

gsap-performance

Optimize GSAP animations with transforms and compositor-friendly practices.

Community
Intermediate
yequdesuyequdesu

gsap-frameworks

Animate UI components in Vue, Svelte, and non-React frameworks with GSAP lifecycle hooks.

Community
Intermediate
smithisrealdevsmithisrealdev

animation-designer

Design and implement web animations with Framer Motion and CSS.

Community
Intermediate