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)