elite-gsap

Reference GSAP core plugins and integration patterns for web animations.

1|Updated Feb 3, 2026

Search Tags:#animation #gsap #parallax #scrolltrigger #framework-integration #splittext

Ready to run

npx skills add https://github.com/RSHVR/elite-web-design --skill elite-gsap

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: elite-gsap
Source: https://github.com/RSHVR/elite-web-design/tree/main/skills/elite-gsap
Command: npx skills add https://github.com/RSHVR/elite-web-design --skill elite-gsap

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

GSAP is a powerful, widely used animation toolkit; this Skill provides a complete, organized reference with patterns to accelerate building complex, performant web animations.

Core Features & Use Cases

Comprehensive reference for GSAP core and plugins (ScrollTrigger, SplitText, Flip, MorphSVG, DrawSVG) with practical usage patterns.
Framework-agnostic guidance plus integration notes for React, Vue, Svelte, and vanilla JavaScript to support diverse projects.
Real-world scenarios including scroll-driven animations, parallax effects, and performance-conscious motion patterns.

Quick Start

Ask the AI to generate a minimal, end-to-end GSAP example using ScrollTrigger and SplitText to animate a hero section.

Frequently Asked Questions about elite-gsap

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

FAQPage Schema

How do I create scroll-driven animations using GSAP ScrollTrigger?▼

GSAP ScrollTrigger enables scroll-driven animations by tying animation playback to the scrollbar position. This reference provides production-ready patterns for parallax and reveals, including setup and performance considerations for smooth scrolling.

Can I use GSAP animations with React, Vue, and Svelte?▼

Yes, GSAP works with React, Vue, Svelte, and vanilla JavaScript. This reference provides framework integration notes and patterns to ensure proper timeline cleanup and performant complex animations across diverse project architectures.

What is the best way to animate text reveals with GSAP SplitText?▼

GSAP SplitText splits text into characters, words, or lines for precise animation control. You can generate end-to-end hero section examples by combining SplitText with ScrollTrigger to create dynamic text reveal effects.

How do GSAP Flip and MorphSVG plugins handle layout and SVG animations?▼

The GSAP Flip plugin animates layout transitions seamlessly, while MorphSVG transforms SVG paths between shapes. This reference covers practical usage guidelines for both plugins to execute complex state and vector animations.

What performance considerations are needed for production-grade web animations?▼

Production-grade web animations require careful setup and performance optimization to prevent jank. This reference enforces usage guidelines and performance-conscious motion patterns necessary for maintaining high frame rates in complex timelines.

Why does my GSAP parallax animation stutter during scroll?▼

Parallax animations often stutter due to unoptimized scroll listeners or heavy DOM paints. This reference outlines performance-conscious motion patterns and ScrollTrigger setup guidelines necessary to achieve smooth, production-grade scroll effects.