gsap-showcase — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited gsap-showcase (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
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.
This skill is the taste layer in a two-layer recipe system:
gsap-scroll, gsap-text,gsap-cursor, gsap-vfx, etc.) provide isolated, copy-paste patterns.
multiple plugins into polished, production-grade animations.
Workflow for premium animations:
gsap-scroll,text reveals via gsap-text, interactions via gsap-interact, etc.).
The showcase provides the what and why; technique skills provide the how.
| 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 |
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 |
| 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 |
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)~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.