Gsap showcase
Production recipes for premium GSAP animations — scroll, text, SVG, cursor, canvas, and visual effects. Claude Code plugin.
npx -y skills add iotron/gsap-cookbook --skill gsap-showcaseAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
2 things to look at
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
- 5 stars5 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Production-grade premium animation compositions from official GSAP showcases. Complete multi-plugin references for building beautiful, polished animations. Companion to official gsap-core, gsap-plugins, gsap-timeline skills (API reference). Triggers: premium animation, showcase, production animation, beautiful animation, hero animation, page transition, loading animation, immersive scroll, complete animation, polished animation, animation composition, multi-plugin animation. Non-triggers: Not for single-technique recipes (use gsap-scroll, gsap-text, etc.), not for API reference (use official gsap-skills), not for setup (use gsap-setup). Outcome: Provides a complete premium animation reference with orchestration notes, which gsap-animate then adapts using individual technique skills.
SKILL.md
5.1 KB, as published. Nobody here has run it
GSAP 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)