K-001/Reveal Landmark Kit
First Kit / out now
The platform
Everything inside Annnimate.
A curated library of GSAP signature components, full Landmark Kits, real React and Vue code, and documentation written by the people who built the originals. Here is how all of it works.
Animations
9 components
Studio Original
New
Noise Image Reveal
scroll
Studio Original
New
Breakout Media
section
Studio Original
New
Morphing List
ui-component
Studio Original
FreeNew
Magnetic Tag Cloud
ui-component
Studio Original
New
Jiggly Button
button
Studio Original
New
Torn Paper Transition
shader
Studio Original
New
Video Player
ui-component
Studio Original
New
Gooey Toast
ui-component
Studio Original
FreeNew
Elastic Divider
experimental
The library
Curated, not a catalog dump.
Annnimate is deliberately not five hundred components. It is the components worth keeping, each one chosen because it earned its place on a real site. Hover a category to isolate it.
Provenance
Built for a job. Made for the library.
Every component is built to the standard we ship for real brands. Some shipped on those brand sites, the rest are Good Fella originals held to the same bar. The version you copy is production-grade either way.
Formats
One component. Every stack.
React and Vue come first - same component, framework-idiomatic. Plain HTML ships alongside for projects without a framework.
Hero.jsx
CircularSliderlive
Hero.vue
HTML03 / Secondary
Drop-in markup with data-anm-* attributes. Works in vanilla JS, Astro, or any static site that can load a script.
magnetic.html
Same component. Every stack.
Browse the libraryLandmark Kits
One system. Built deep.
A Kit is a deep, stand-alone collection of animations built around one system you would otherwise build from scratch. Separate product, not bundled with the Library. Two Kits so far: Reveal and Menu. One purchase, every project, forever.
Documentation
Documented by the people who built it.
Every component carries the things that bit us when we shipped it the first time. Real warnings, real fixes, real reasons - written by the studio that built the original. And when you'd rather not leave the editor: connect the MCP server and your coding agent pulls components for you.
Real edge cases / 07 entries
From the Annnimate docs
- 01InstallationGSAP, the library, and the first component running in a minute.GSAP 3.13+ ships ESM-only - older bundlers need the legacy CJS path or builds silently exclude the timeline.
- 02Quick startFrom copy-paste to a tuned component in under five minutes.useGSAP without a scope leaks selectors across remounts - every animation needs { scope: ref }.
- 03CustomizationThe data-anm-* attribute system. Every component tuned without touching the source.data-anm-* attributes read null on first render in Next.js 16 Strict Mode - gate the read inside useGSAP.
- 04PerformanceWhat we tune before shipping, and what to watch in your own build.GSAP does not return early under prefers-reduced-motion - wrap entries in gsap.matchMedia or the animation runs at full speed for users who asked it not to.
- 05AccessibilityFocus, keyboard, reduced motion. The defaults that ship with every component.Focus trap inside overlays needs inert on siblings - aria-hidden alone still leaves keyboard reachable.
- 06ReactuseGSAP, scoped refs, cleanup that survives Strict Mode remounts.Cleanup with ctx.revert(), not tl.kill() - kill leaves scoped selectors mounted and the next remount double-binds.
- 07VueComposable for the script-setup workflow. Nuxt-ready.Setup script timing - onMounted fires before children mount; use nextTick before binding refs.
07 of many guides shown. The full set lives in the docs.
Read the docs
License / Free forever / Use in production / No account
Take one. No paywall.
One real component per category, free in production. No trial, no expiring license - copy it once and ship it.
