Gsap showcase

Skill iotron/gsap-cookbook/skills/gsap-showcase

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.From its SKILL.md

Install

npx -y skills add iotron/gsap-cookbook --skill gsap-showcase

Assembled 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.

SKILL.md

5.1 KB, ~1.0k tokens by cl100k_base, 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 via gsap-text, interactions via gsap-interact, etc.).

The showcase provides the what and why; technique skills provide the how.

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)

What ships with it: 15 files

64.8 KB alongside SKILL.md

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