About gsap-showcase
gsap-showcase is a skill for developers assembling complete GSAP animation compositions. It provides categorized references with orchestration notes and full code, complementing skills for individual techniques.
Key features
- 01Complete animation composition references
- 02Examples grouped by animation category
- 03Plugin orchestration and timing notes
- 04Responsive handling and adaptation notes
- 05Full HTML, CSS, and JS examples
Use cases
- 01Plan a scroll-driven scene combining plugins
- 02Build a responsive animated hero section
- 03Adapt an interactive composition to new content
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/gsap-showcasein Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
references/hero-sections/.gitkeepresponsive-matchmedia.mdresponsive-splittext-animator.mdreferences/interactive-scenes/.gitkeepcomplex-svg-timeline.mdfree-for-all.mdreferences/loading-sequences/.gitkeepreferences/page-transitions/.gitkeepreferences/scroll-experiences/.gitkeepcard-stack.mdcurve-swipe.mdimage-sequence.mdinfinite-card-slider.mdscrubbed-bento-gallery.mdscrubbed-rolodex.mdDetails
From the project READMEGSAP Showcase — Premium Animation References
Companion: For individual GSAP plugin APIs, invoke the relevant official skill (gsap-core, gsap-plugins, gsap-timeline, gsap-scrolltrigger, etc.). This skill covers complete compositions only.
How to Use
This skill is the taste layer in a two-layer recipe system:
- Layer 1 — Building blocks: Individual technique skills (
gsap-scroll,gsap-text,gsap-cursor,gsap-vfx, etc.) provide isolated, copy-paste patterns. - Layer 2 — Showcase (this skill): Complete premium compositions that combine multiple plugins into polished, production-grade animations.
Workflow for premium animations:
- Check showcase for a composition similar to the request.
- Study its orchestration — plugin combination, timing, layering, responsive handling.
- Implement using technique skills for each component (scroll triggers via
gsap-scroll, text reveals viagsap-text, interactions viagsap-interact, etc.).
The showcase provides the what and why; technique skills provide the how.
Categories
| Category | What | Example |
|---|---|---|
hero-sections | Above-fold hero compositions | Text reveals + scroll + responsive |
scroll-experiences | Immersive scroll-driven scenes | 3D carousels, pinned sequences |
interactive-scenes | Complex interactive compositions | Multi-plugin showcases |
page-transitions | Full-page transitions | Between-page animations |
loading-sequences | Premium loading/reveal | Staged loading animations |
Showcase Entry Format
Each reference file in references/<category>/ contains:
| Section | Contents |
|---|---|
| Source | Original CodePen link and author credit |
| Plugins Used | GSAP plugins required (ScrollTrigger, SplitText, etc.) |
| What Makes It Premium | Key design qualities — timing, layering, polish |
| Orchestration Notes | How plugins combine, sequencing strategy, responsive approach |
| Complete Code | Full HTML + CSS + JS (production-ready reference) |
| Adaptation Notes | How to modify for different content, frameworks, breakpoints |
Available Showcases
| Showcase | Category | Plugins | Reference |
|---|---|---|---|
| Responsive SplitText Animator | hero-sections | SplitText, GSDevTools | responsive-splittext-animator |
| Responsive matchMedia | hero-sections | gsap.matchMedia() | responsive-matchmedia |
| Scrubbed Vertical Rolodex | scroll-experiences | ScrollTrigger | scrubbed-rolodex |
| Free For All (Flagship) | interactive-scenes | SplitText, Physics2D, MotionPath, DrawSVG, CustomBounce, CustomWiggle | free-for-all |
| Complex SVG Timeline | interactive-scenes | Timeline labels, SVG attr, GSDevTools | complex-svg-timeline |
| Scrubbed Bento Gallery | scroll-experiences | ScrollTrigger, Flip | scrubbed-bento-gallery |
| Card Stack | scroll-experiences | Flip | card-stack |
| Curve Swipe | scroll-experiences | MorphSVG | curve-swipe |
| Image Sequence | scroll-experiences | ScrollTrigger | image-sequence |
| Infinite Card Slider | scroll-experiences | ScrollTrigger, Draggable | infinite-card-slider |
Category References
references/hero-sections/— Above-fold hero compositions (2 showcases)references/scroll-experiences/— Immersive scroll scenes (6 showcases)references/interactive-scenes/— Multi-plugin interactive compositions (2 showcases)references/page-transitions/— Full-page transitions (planned)references/loading-sequences/— Premium loading animations (planned)
Comments
Markdown supported