Horizontal Case Study
A case-study section that turns scrolling down into a sideways walk through a project, laid out like a magazine. Each image wipes up into its frame as it slides in, and the text rises in line by line.
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 libraryDepth, 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 KitLearn 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.
A case-study section that turns scrolling down into a sideways walk through a project, laid out like a magazine. Each image wipes up into its frame as it slides in, and the text rises in line by line.
A full-screen section with a list of categories in the middle and four photo cards around it. Click a category and every card swaps its photo in one move, sliding up or down with the way you moved through the list.
A stack of photo cards that holds the screen while you scroll. Each new card slides up through a fixed frame and covers the last one, which shrinks back, tilts and sinks out of the way underneath it.
A how-we-work section that stays on screen while you scroll and brings each step forward in turn. A thin line stretches down to the active step, the image beside it slides up to match, and a click on any step jumps straight to it.
Corner brackets glide from word to word through your paragraph as people scroll, and fit each word's letters. The framed word stays sharp and the rest blurs or fades the further it sits from the frame.
Your project titles sit on the edge of a wheel that turns as you scroll, and the one that reaches the middle swaps the photo beside it. It always comes to rest on a whole title, and you can drag the wheel or click a title to turn it there.
A big headline changes colour exactly where photos scroll under it, so their edges cut straight through the letters. Three photos at different depths drift past at different speeds, the smaller ones further back.
A one-word headline that tips and turns in 3D as you scroll, while a trail of fading copies stacks out behind it. Scrub it with the scroll or let it play once it comes into view.
A sentence whose first word rolls through a long list as you scroll, while the rest stays put. It always comes to rest on a whole word, and you can drag the column or click a word to roll it onto the line.
A big word grows as you scroll until you fly straight through the gap between two of its letters, and the next section is waiting on the other side. The zoom follows your scroll, then the next section fades in on its own.
Every component's code now has a Usage tab: a working example that imports it and renders it with real content. The docs and the Starter Pack walk the same steps.
A statement paragraph whose lines rise in from behind a mask, then the first line slides right to open an indent, and a small image fades into the gap. The editorial intro layout from studio sites, animated.
A hand-drawn circle or underline that draws itself around one key word as the headline scrolls into view. Works with any word, any font, any length.
A list of words on a turning wheel: the word in the middle stands out while the rest fade away above and below. Turn it with the scroll, or let it spin through the list and land on the last word.
A headline with small photos tucked between the words. As it scrolls into view, the lines rise in and each photo opens up, pushing the words apart to make room. Made for hero headlines and section titles on agency, studio and about pages.
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.
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 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.
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 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.
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 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.
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.
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.
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 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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.