K-001/Reveal Landmark Kit
First Kit / in production
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
Morphing Accordion
ui-component
annnimate.com
FreeNew
Scale Slider
ui-component
Studio Original
New
Morphing Select
ui-component
Studio Original
New
Morphing Pill Menu
menu
annnimate.com
New
Expanding Strip
ui-component
Studio Original
New
Index Wipe
ui-component
Studio Original
FreeNew
Image Fly-In
experimental
Studio Original
New
Wipe Slider
section
Studio Original
New
Step Wipe
section
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. HTML and Webflow ship alongside for projects that need them.
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
Webflow04 / Secondary
JSON export plus a Custom Code snippet. The full Designer-to-production path stays inside Webflow.
- 01PasteDrop the .webflow.json into the Designer. Structure + classes land instantly.
- 02WirePaste the at-rules block into Custom Code (Project Settings → head). Keyframes, font-faces, motion-preference media queries.
- 03TuneEdit data-anm-* attributes directly on the element. No code editor needed.
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. The first Kit is Reveal. 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 / 08 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.
- 08WebflowThe .webflow.json paste flow and Custom Code at-rules. The full Designer-to-production path.Non-ASCII characters in JS comments (em-dash, arrows, smart quotes) crash the Custom Code editor with Unexpected token ';'.
08 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.