The library
Curated, not a catalog dump.
Every component built to the bar we ship for real brands. Filter, preview live, copy in React or Vue.
Browse the libraryLandmark Kits
Depth, not breadth.
A deep, stand-alone collection built around one system. Two Kits so far: Reveal, preloaders and hero sections as one mixable system, and Menu, ten site navigation menus as one system. React, Vue, HTML / CSS / JS. Not for Webflow.
See the Menu 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.
Put one attribute on any image and it tears open from the middle as you scroll to it: a rough, noisy circle grows outward until the whole photo shows. Made to sit on every image of a case study or blog post, each one with its own tear. Plain SVG, no WebGL, and reduced motion just shows the image.
A film that sits in its spot beside your copy, then grows out to every edge of the screen as you scroll, covering the copy on the way. Click the film or the play button and the page scrolls you straight to the other state. Built for showreel bands, case study intros and product film sections.
A list of projects or roles where clicking a row grows it into a full detail panel. The thumbnail, title and details travel to their new places, the corners reshape cleanly and the text rises in line by line. Close it, press Escape, click outside or click again mid-morph and it folds straight back into its row.
A pack of colourful tags sitting in the middle of the page. Sweep the mouse through and they get knocked outward, harder the faster you move, tilting as they bump into each other. Then every tag is pulled back to its own spot like a magnet, so the cloud always tidies itself back up.
A button that feels like jelly. Press it and it squashes flat with the sides bulging out a beat later, let go and it springs up tall and wobbles back into shape. Hover pokes it from whichever side your cursor comes in, harder the faster you move. Tune how deep it squashes, how tall it springs, how hard and fast it wobbles, and whether the label rides along or holds its shape.
A scroll transition between two photos that tears like paper. The first image and its headline rip away from the bottom up onto a plain white sheet, then the sheet rips away the same way onto the second image. The swap happens while the frame is all paper, so you never see the cut.
A custom video player on a native video element. Fullscreen never leaves the page: the frame grows from its slot to fill the screen and flies back on close, and the film keeps playing the whole way. Muted, loop, play inline, preload and captions are all real controls, the captions sit in their own line above the bar, every button has a key, and a hidden line tells screen readers what just changed.
Notification toasts for a corner of your app. A new toast slides in and the ones already there settle in behind it. Hover the stack and it fans open, with the goo stretching between the toasts as they part. Close one and it leaves the way it came, and swiping follows the same rules as Sonner. Pick the corner, how many show at once, how long they stay and how thick the goo is.
A section divider with some life in it. One thin line sits between two sections, and when the cursor sweeps across it the line springs away and rings back to rest like a guitar string, harder the faster you go. It takes the width of your container and nothing runs while it is at rest. This week's free component.
Sites built with components from the library, each with the components it uses linked. Submit yours in three short steps, with a recording or screenshots, and get it in front of the developers and studios who read us every week.
A soft wash of colour that hangs off the top of your header and drifts slowly on its own, darkest against the edge and lighter as it thins out. Bring the cursor close and the smoke swells toward it and drags behind with real weight, but only in the small area around the cursor, while the rest keeps flowing. Behind a sticky header it can pull itself back into the edge on scroll until nothing is left, and grow back when you return to the top.
The sign-in email now carries a code you type on the login page instead of a link. Corporate email scanners were opening magic links before you could, which made them expire. The code fixes that for good.
A picture redrawn entirely as text characters, each one picked by the brightness underneath. It types itself in as soon as the picture loads and settles into a two-colour duotone, with the colour arriving a beat behind the characters. Click anywhere and a sweep runs out from that point, flipping the whole thing to the picture's own colours, then back on the next click. Add a depth map and the grid takes on a parallax that follows the cursor.
A whiteout transition between two photos. Scroll rolls a fog bank up the frame and the first image loses its detail before it loses its colour, so it reads as weather rather than a fade. The swap happens under full cover, so you never catch the cut, and the headline over it is eaten by the fog the same way.
A roster you can filter and drag. Pick a group on the left and the cards swap out, click someone and a blurred panel fades in over their photo with a short profile. Every card stays the same size, so the strip never jumps, and dragging through the roster never opens a panel by accident.
A how-it-works row on a line. As you scroll, a dot draws the line behind it and each step lights up as the dot reaches it, its number rolling in and its photo fading in underneath. Built for process, onboarding and delivery sections. This week's free drop.
A field of photos floating at different depths that bend like fabric when you scroll fast. The near ones are bigger and curl more, the far ones sit smaller and barely move, and the moment you stop every sheet rings out and settles flat. Nothing moves until someone scrolls.
A quantity picker where the pill is the gauge: press plus and the ink slides across, press minus and it draws back, with a soft bounce on every landing. The buttons live inside the fill, so the one you cannot use anymore gets pushed to the edge. The number and the line total roll along with it, and holding a button keeps counting, faster the longer you hold.
A chapter rail that stays pinned beside your content while it scrolls past, with a hairline that slides and resizes onto whichever chapter you are actually looking at. Each chapter's headline rises out from under a mask and its product shot settles from a soft zoom, once, the first time you reach it. On a phone the rail becomes a strip that scrolls sideways to keep the active chapter in view.
A wall of client logos that turns over one cell at a time as you scroll - the old mark drifts off and blurs away, the new one arrives sharp from the other side. Two arrows step a whole set by hand, forward or back.
A mechanical split-flap board, the kind that hangs in stations. Click it and every tile riffles through its flaps to the next result, cascading left to right like a real drum. This week's free drop.
Five photo tiles on a bento grid, one always in the spotlight. Click any small tile and it grows into the focus slot while the rest reflow around it, even mid-move.
One tooltip for a whole toolbar. It is born out of the button you hover with a liquid neck, travels to the next button while it resizes to that caption, and sinks back into the button when you leave.
Filter chips that fly into a selection bar and merge into it with a liquid neck when you pick one, then stretch and snap back out when you remove it. The results count rolls with every change, and Clear all pours the whole selection home one chip at a time.
A small dark capsule pinned to the top of the page that always names the section you are in. Click it and it grows into the section list, pick one and it grows again into a short description with a scroll-to link, then settles back down.
Seven production GSAP components for one landing page - hero, scroll chapters, text effect, menu, slider, accordion, footer. EUR 29 one-time, yours forever, with its own workspace in your account.
A pricing section with a monthly and yearly switch. Flip it and every price rolls to its new number digit by digit, a savings chip pops in next to the switch, and each plan name carries a slow shimmer. This week's free drop.
Recommend Annnimate and earn 25% of every purchase your referrals make, for as long as they keep buying. Library plans and Kits both count, and you don't need an Annnimate account to join.
A pile of photo and stat cards covers the headline, and scrolling scatters them out to their own spots around the text, uncovering it underneath. Scroll back up and they gather into the pile again.
A tight stack of photos that files itself out into a strip beside one large frame when you click it, with the project details alongside. Click any photo in the strip and it moves into the big frame, so you can go through a whole shoot without leaving the page.
A blob of dots follows your cursor and trails out behind it, thinning into scattered specks as it goes. Move fast and it stretches out, stop and it fades away.
A never-ending spiral of image cards winding up around you like a staircase. Drag it to spin and it keeps going before it settles, scroll to push it faster, and it drifts slowly on its own when you leave it alone.
Characters bloom over your photo or video as you scroll, tinted to the colors underneath and appearing only where it is bright. The image itself never disappears - unlike typical ASCII effects that replace it entirely, this one only adds a texture on top.
Words appear one by one along an invisible curve as you scroll, until a full sentence rides the hills and valleys of a hidden line.
A strip of photo cards you drag sideways - whichever one passes the middle grows large like it slid under a magnifying glass, then shrinks back as it moves on.
A three-chapter scroll story built on a visible grid, with an image and headline for each chapter that swap as you scroll.
A big headline that fills with colour as it scrolls into view, with a bright accent wave riding the edge of the fill line by line. Hand it several colours and the letters flash through each one before settling.
A tile with an expand button that opens into a full detail dialog - the page dims and blurs behind it, the dialog rises in with a fast fade, and a soft gradient follows it up. Free to grab from the Starter Pack.
A dotted globe you can drag and spin, built to show where a company operates. Pick a store or click a marker and it turns to face it, the label rises in, and the route to it draws across the surface.
A full drop-in footer section. The footer is uncovered with a parallax scrub as you scroll to it, the content cascades up through masks line by line, and a frosted-glass dock pill morphs into a quick-nav panel - on click, or on its own when you reach the very bottom of the page.
A three-step contact form that slides between steps, floats its labels on focus, and morphs the send button into a checkmark on submit.
The Library now bills quarterly at lower prices while we build to 100 components: Solo is EUR 20 a month billed quarterly (was 29), or EUR 199 a year (was 249), with Studio and Studio+ cut the same way. Join during the offer and your rate is locked forever - when the library hits 100 components, prices rise for new members only. Existing monthly members keep their plan unchanged.
A full-cover image behind old CRT glass. Hover and the signal fights itself: sync tears, analog snow, vertical hold slips, color bleed - and the glitch leans away from whichever side your cursor is on. Digital mode swaps the CRT look for clean block-slice corruption.
A full-bleed image slider where each slide change plays a staggered curtain wipe across the columns, settling the next image into place. Arrows, drag, and keyboard navigation all built in.
Tabs where the active pill and the content panel below it read as one connected shape. Switch tabs and the pill pours sideways, its curved joint flowing into the panel while the new content settles in. Keyboard navigation built in.
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.
