K-001/Entrances Landmark Kit
First Kit / in production
- 01WebGL cover variants/Preloader
- 02GSAP cover variants/Preloader
- 03WebGL reveal variants/Page-enter
- 04GSAP reveal variants/Page-enter
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
Gooey Hover Reveal
shader
Studio Original
Gooey Menu
experimental
Studio Original
Typewriter
ui-component
annnimate.com
Mega Menu
menu
Studio Original
Multi-Level Drawer Menu
menu
good-fella.com
Dual Scramble
ui-component
Studio Original
Fullscreen Slide Menu
menu
Studio Original
Mesh Gradient
shader
Studio Original
Image Dissolve Scroll
shader
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 shipped on a real brand site before it earned a place in the library. The version you copy has already survived a launch.
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 LIBRARYA 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 Entrances. One purchase, every project, forever.
Landmark Kits
One system. Built deep.
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.
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.