The library
Curated, not a catalog dump.
Every signature component, built for a real site. Filter, preview live, copy in React or Vue.
Browse the libraryLandmark Kits
Depth, not breadth.
A deep, stand-alone collection built around one system. The first Kit is Reveal - preloaders and hero sections, one mixable system, WebGL and GSAP. React, Vue, HTML / CSS / JS. Not for Webflow.
See the Reveal KitConcepts, patterns, tools
Learn the vocabulary.
Definitions and examples for the GSAP and animation concepts behind production motion. Free, citable, and cross-linked with the components that use each idea.
Open conceptsEvery signature component, Kit, and update shipped to Annnimate, newest first.
Component pages now show the animation as a timeline. Every move is a labelled bar, a playhead tracks it as it plays, and hovering a row highlights the element it moves in the preview. Drag the ruler to scrub through it at your own pace.
A filterable product grid where clicking a category flies every card to its new spot instead of jumping, and a toggle morphs the whole thing between grid and list. Cards farthest from home always move last.
A full-screen hero where two giant letters split apart to reveal a video framed inside a rounded capsule window. Click the capsule and the video grows to fill the whole screen, click again to shrink it back.
An FAQ accordion where each answer pours out of its question pill like liquid, briefly merging with it before settling into a clean rounded panel. Keyboard support and reduced-motion handling built in.
A row of square photos that shrink away toward one edge, with the biggest one cropped right off the screen. Drag it, throw it, scroll the page, or let it drift on its own, and it loops forever with no seam. Free for everyone.
A select field whose dropdown pours out of the trigger like liquid, the two surfaces briefly merging before snapping apart into a clean panel. Options fade in fast, a soft highlight glides between them, and your pick rolls up into the field as the panel closes around it.
A compact Menu pill that grows into the whole navigation panel when clicked, no overlay stacked on top, the pill itself morphs open. Links cascade in letter by letter, roll on hover, and an image slot inside is ready to link anywhere.
A row of tall photo panels that blooms wide when you hover one, with the rest compressing to make room and a title rising into view. Great for a roster, a portfolio, or a feature strip.
A full-screen list of names or chapters over a photo. Hover a row and its image wipes into the background from the direction you're moving, the letters re-roll to a fresh copy of themselves, and the counter catches up. Great for a chapter index, a work menu, or an editorial nav.
Imagery flies in from deep inside the page toward you, fading out around whatever you place in the middle - the component measures your content and keeps the space around it clear. Move the cursor and the whole field glides with it. Free for everyone.
The Stagger Playground lets you drag the each value, switch the from origin, and freeze a stagger wave mid-flight on a real grid. The ScrollTrigger Builder puts start, end, scrub, and pin against a live scrolling frame - feel the trigger, then copy the exact config.
A fullscreen hero slider that wipes between slides behind a slanted edge. Titles swap character by character, the percentage rolls like an odometer, and the whole thing stays smooth no matter how fast you click. Feed it your own slides and images.
Pick any GSAP ease and watch it drive real UI, cards, menus, reveals and counters, not an abstract box. Compare two eases side by side, scrub the timeline frame by frame, copy the GSAP code or its CSS linear() twin, and convert any cubic-bezier() to a CustomEase. Free, no signup.
Every component page now has a control panel. Drag the sliders to tune the animation, the preview updates as you go, and the code you copy carries your exact settings. Presets jump you straight to a look.
A full-screen section that wipes to the next step as you scroll. The background and the centered card reveal together, while the title, step number and description swap in sync. Feed it your own steps and images.
A tight stack of image cards that fans open into an arc when you hover it, blooming a little wider as you sweep across the cards. Drop in five photos and it fans on its own.
One search across the docs, concepts, patterns, and comparison pages - press Cmd+K anywhere in the reference section. Guide pages also got a copy-for-AI menu: view any page as clean Markdown, or open it straight in Claude or ChatGPT.
The Multi-Level Drawer Menu is now free, joining the Starter Pack. Every week another component goes free. Find them with the new Free badge and Free-only filter in the library.
The library can now be filtered by how a component responds: hover, click, drag, scroll, or ambient. Component pages also picked up prev/next browsing and a category row, so you can flip through the whole library without going back to the grid.
A slow-rotating ring of images that auto-fits any screen. Drop it behind a CTA or hero as a living backdrop.
A full-bleed hero that opens into a slide-in detail panel, with the background image pushing back and darkening behind it. Good for product details, case studies, or article previews without leaving the page.
A drop-in footer section with a scroll-reactive gradient glow and an auto-fitting SplitText wordmark that rises on scroll. Copy it in HTML, React, or Vue.
A drop-in testimonial section with a draggable WebGL globe as the visual layer. Three frosted-glass cards float in front of the sphere; drag it to spin, or let it drift on its own. On mobile it falls back to a lightweight CSS 3D globe with a swipe-able card row. Swap in your own images and copy with data attributes.
Buy a plan or a Kit right on the page, no redirect to a separate checkout. You land back on the exact component you came from.
A new button in every component's code panel. It copies the code plus the context an AI needs to adapt it, so pasting into Cursor or ChatGPT gets you a working result instead of a rough guess.
A retro print shader for images and video. Dithers any media to 2 colors with a Bayer grid, a cursor reveal lens that uncovers the real color under the mouse, and a faint ambient shimmer in the dark areas. Good for hero sections that need texture without weight.
A new category just landed. Sections are full drop-in marketing sections — complete layout, responsive behavior, and animation choreography in one paste. First component: Drift Gallery, a WebGL card slider with autoplay drift, magnetic hover, and a filmic grade.
Connect Annnimate to Claude Code, Cursor, or VS Code and your coding agent searches the library and pulls paste-ready component code for you. One-click install, sign in with your normal account - no API keys to manage. Included in every plan.
Variable-font typography that reacts to scroll speed. Weight, width, and slant shift with scroll velocity and ease back to rest when you stop. Works with any variable font and any axis the font supports.
Library members get 20% off every Landmark Kit, and Kit owners get 20% off their first year of the Library. It applies at checkout, no code needed.
Our first Landmark Kit. Preloaders and hero sections as one mixable system - pair any cover with any reveal. 13 components in WebGL and GSAP, shipped for React, Vue, and HTML / CSS / JS. Not for Webflow. A one-time purchase, yours on every project, forever.
The roadmap is now open to everyone. Vote on what we build next and suggest components without signing in. The most-wanted things ship first.
Email signups across the library, the Starter Pack, and the Kits waitlist were failing silently due to an upstream API change. The flow is restored. If you tried to sign up and didn't receive a confirmation email, please try again.
We retired the Discord invite popup that interrupted the app and replaced it with a What's-new bell in the sidebar. The bell shows a dot when something new has shipped, and Discord is now always one click away from the Support section.
Three production-grade GSAP components, free. React, Vue, and HTML/CSS/JS for each. Drop your email and we send the pack. No attribution. No expiration.
Every Library tier is discounted through July 6, 2026. The discount is locked in by Stripe forever, so signing up during the launch window keeps the launch price on every renewal. Cancel anytime.
We dropped the cookie banner. Analytics runs without cookies by default and only upgrades if you opt in. Less tracking, no popup.
Anyone who joins during the launch window locks in 25% off everything Annnimate ships from now on, for as long as you stay a member. Future Kits, future tiers, future add-ons.
Studio and Studio+ plans come with shared seats. Invite teammates by email from Settings, see who's active, and revoke seats anytime.
Simpler pricing. Solo for one developer, Studio and Studio+ for teams with shared seats you invite from settings. Billed yearly or monthly.
New pages comparing GSAP with Framer Motion, Motion, and CSS, plus honest alternatives pages, so you can decide what fits your project before you commit.
Every component now has its own React, Vue, and HTML guide page with install steps, where the code goes, and the gotchas for that stack. Switch frameworks and copy the version you need.
New reference surfaces: full documentation, a concepts hub that explains the GSAP techniques behind the components, and pattern guides comparing the components that solve a given problem.
See what's being built, what's next, and what we're weighing. Vote on what you want most and suggest new components. Members shape the queue.
The library was rebuilt with instant filtering by category, search, sort, and three view modes, so you can find the right component faster.
Every animation has a new detail page: a large live preview you can resize and play fullscreen, framework tabs for React, Vue, HTML and Webflow, the configurable attributes laid out clearly, and provenance showing the real site the motion shipped on.
Every animation now ships in Vue alongside React, HTML/CSS/JS, and Webflow. Switch frameworks on any component page and copy production-ready code for your stack.
We rebuilt Annnimate from the ground up. A new library, a redesigned page for every component, React and Vue side by side, and a sharper, faster site throughout. Every component is still built to the standard we ship for real brands.
A WebGL fragment shader paints a solid cover over your content. As your cursor moves, gooey blobs spawn along the path and merge into a liquid trail that cuts a hole through the cover. The trail follows your hand with a soft lag, each blob blooms in instead of popping, and when you stop the whole shape implodes toward its centroid. Nothing is revealed until you move.
One shared dropdown that morphs in height as you move between groups — no separate panels appearing and disappearing, just a continuous Stripe-style container. Content enters from the direction you hovered from, a sliding underline tracks the active trigger, and each link can swap a preview image on hover. Collapses to a mobile accordion at the configured breakpoint.
When you pick the Webflow framework on an animation, the CSS view now shows only the at-rules you actually need to paste into Webflow Custom Code — usually just a few keyframes or a reduced-motion block. Everything else is already inside the JSON paste.
Cycles through a list of phrases character by character — type speed, delete speed, and pause durations all configurable via data attributes. Human-typing mode adds per-character jitter for organic rhythm. Pure GSAP timeline sequencing, no setInterval.
A floating action button that fans child actions into arc, line, grid, radial, or cluster patterns — held together by an SVG metaball filter so everything reads as one liquid blob at rest. Five spread patterns and three trigger modes, all configurable via data attributes.
A cascading two-panel drawer menu for ecommerce, editorial, and agency sites. Panel 1 clips in from the left; hovering a primary category reveals a sublist in Panel 2 next to it. On mobile, it collapses into a click-driven drill-down with a back button.
Each pricing plan now surfaces the most recently shipped animation right above the price, linked to its detail page. So you can see exactly what kind of work is landing every week before you decide.
A small announcement bar sits below the navigation when something worth seeing just shipped. Signed-in members get a bell in the header — open it for a feed of recent animations and posts grouped by week.
Closing now mirrors opening exactly — the dialog flows back into its trigger card. Built on the native dialog element, so keyboard navigation, focus trap, and Escape-to-close all work out of the box.
The hero slider now surfaces recently shipped and updated animations first, with small New/Updated badges in the corner of each card.
Returning customers without a session now see a clear Sign in link in the header, mobile menu, gated code blocks, and footer — no more dead-ending on Subscribe.
Text scrambles through a brand-accent color before resolving to its final state — five triggers (scroll, hover, click, load, manual), group stagger, and zero layout shift.
New post on GSAP 3.15's easeReverse property — why reversed animations feel off, how to fix it with one line, and the timeline defaults pattern.
Cinematic fullscreen menu where the page slides, rotates, and scales away while a dark overlay reveals navigation links — one seamless motion. Includes burger-to-X morph, image panel with per-link reveals, and full keyboard + reduced-motion support.
Browse real websites built with Annnimate animations. Submit your own site to get featured — share what animations you used and let the community see your work.
New articles covering GSAP timelines, React useGSAP hook, CSS animations vs GSAP, stagger, hover effects, Next.js page transitions, and Intersection Observer vs ScrollTrigger.
New tutorial covering 10 production-ready scroll animation patterns with GSAP ScrollTrigger. Fade reveals, parallax, mask effects, SVG drawing, flip animations, and more — all with copy-paste code.
Animation detail pages now show a link to the original inspiration source where applicable.
Animated mesh gradient background with up to 8 color anchors in slow orbit. Cursor interaction physically stirs the colors via a fluid sim — drag, swirl, and watch them settle.
New tutorial covering five production-ready text animation patterns with GSAP SplitText. Character reveals, line masks, word staggers, scroll scrub, and accessibility — all with copy-paste code.
All animation pages are now accessible without an account — browse, discover, and watch animations live without signing in. Code, tips, and configuration remain for subscribers only.
WebGL shader animation that dissolves an image into organic noise patches as you scroll, driven by GSAP ScrollTrigger scrub.
New comparison post breaking down the three most popular React animation libraries. Bundle sizes, performance data, code examples, and honest recommendations.
The Docs link on animation detail pages now takes you straight to that animation's documentation instead of the general docs page.
Animations published in the last 14 days show a green "New" badge. Makes it easy to spot recent additions when browsing the library.
A scroll-based animation that flips multiple elements in sequence. Cards, images, or text blocks rotate smoothly as you scroll.
Characters fade in one by one as you scroll, creating a typewriter reveal effect. Works with sequential or random order for a scattered look.
Control which cookies Annnimate uses. Manage your privacy preferences from any page with a simple banner interface.
Bookmark your favorite animations for quick access. Build a personal collection from your dashboard.
Try our text-reveal and circular-slider animations completely free. Interactive previews with live code editing let you test customization options before signing up.
Get lifetime access with a one-time payment. No subscriptions, no recurring fees. Limited to 150 seats.
Join the Annnimate Discord with role-specific channels for Pro and Founding Members.
Request specific animations with reference URLs and submit feature ideas publicly or anonymously.
After months of work, Annnimate v2 launches with 40+ production-ready animations, full React and Webflow support, an AI Assistant for custom animations, and complete documentation for every component.
