# Annnimate - Full Component Reference > Production GSAP motion components for React and Vue. Every component shipped on a real brand site before it reached the library. By Good Fella. This file is the complete component catalog with descriptions, categories, keywords, and use cases inlined. Use it as a single-fetch index when answering questions about Annnimate components. Site: https://annnimate.com/ Library: https://annnimate.com/animations Docs: https://annnimate.com/docs Pricing: https://annnimate.com/pricing --- ## Process Rail URL: https://annnimate.com/animations/process-rail Category: scroll Keywords: scroll, scrub, process, steps, timeline, motion-path, svg, sticky, how-it-works A row of steps along a line. As you scroll, a small bead draws the line behind it and each step lights up as the bead reaches it, its number rolling in and its image fading in underneath and staying. For how-it-works, onboarding and process sections. Use cases: - how it works section - onboarding steps - process or method overview - order and delivery flow - programme walkthrough --- ## Scroll Mesh Bend URL: https://annnimate.com/animations/scroll-mesh-bend Category: shader Keywords: shader, webgl, three.js, scroll, scrolltrigger, velocity, bend, fabric, image, gallery, glsl A field of photos layered at different depths that bends like fabric when you scroll fast and settles flat when you stop. Near photos are bigger and bend more, so the page reads with real depth. Use cases: - Portfolio or studio index where a field of project shots drifts past a headline - Case-study opener that gives a set of stills a physical, tactile feel - Editorial photo essay with a slow scroll and a soft ripple on every stop - Brand or product lookbook where the shots float at different depths --- ## Pill Stepper URL: https://annnimate.com/animations/pill-stepper Category: ui-component Keywords: stepper, quantity, counter, odometer, cart, input, pill, microinteraction A quantity picker in a pill. Press plus or minus and the digits roll to the new number, up for more and down for less, while the line total beside it rolls along. Hold a button and it keeps stepping, faster the longer you hold. Use cases: - cart quantity - pricing calculator seats - booking guests and nights - settings with a numeric value --- ## Feature Rail URL: https://annnimate.com/animations/feature-rail Category: section Keywords: scroll, scroll-spy, sticky, rail, chapters, indicator, hairline, editorial, sports A sticky chapter rail with scroll-spy. Chapter names stay pinned on the left while their content scrolls past on the right, with a hairline indicator that slides and resizes to whichever chapter is active. Use cases: - product collection walkthrough - feature-by-feature tour - brand story chapters - spec sheet navigation --- ## Logo Shuffle URL: https://annnimate.com/animations/logo-shuffle Category: section Keywords: logo wall, clients, partners, blur, scroll-driven, section, sports A wall of client marks in a fixed hairline grid that turns over one cell at a time as the visitor scrolls: the old mark drifts off and blurs away, the new one arrives sharp from the other side. The stage stays put while the page scrolls past, and a pill with two arrows steps a whole set by hand. Use cases: - Client or partner logo wall - Sponsor showcase section - Press/brand mentions strip --- ## Split Flap Board URL: https://annnimate.com/animations/split-flap-board Category: ui-component Keywords: split-flap, solari, flip, board, typography, counter, results A mechanical split-flap board, the kind that hangs in stations. Click it and every tile riffles through its flaps to the next result, rows cascading left to right, each tile landing on its own beat like a real drum. Use cases: - results or scoreboard bands on a sports or event site - stats sections that flip between figures - launch countdowns and hero words - departure-board style headline reveals --- ## Bento Focus URL: https://annnimate.com/animations/bento-focus Category: ui-component Keywords: flip, bento, grid, focus, feature-grid, photo-grid, saas Five photo tiles on a bento grid with one big focus slot. Click a small tile and it grows into the slot while the previous one shrinks back and the rest re-settle into the mixed-shape slots on the right, farther tiles moving later. Click again mid-flight and the grid simply changes course. Use cases: - SaaS features section with one expanded feature at a time - brand facets or season chapters on a case-study page - team or roster grid with one spotlighted profile - portfolio capability index --- ## Morphing Tooltip URL: https://annnimate.com/animations/morphing-tooltip Category: ui-component Keywords: tooltip, hover, morph, travel, interactive, gsap, ui-component, accessibility One dark tooltip that pulls up out of the toolbar button you hover, slides between neighbours while it resizes to each caption, and sinks back into the button when you leave. Use cases: - Gear or product lists where hovering shows a short spec - Icon toolbars that reveal labels on hover or focus - Navigation rows with a shared contextual hint - Data tables with per-column or per-cell detail on hover --- ## Gooey Filter Chips URL: https://annnimate.com/animations/gooey-filter-chips Category: ui-component Keywords: filter, chips, gooey, svg-filter, keyboard-navigation Filter chips that fly into a selection tray and merge into it with a gooey neck when picked, then pull back out with a snap when removed. The results count rolls with every change. Use cases: - shop/product filters - tag pickers - multi-select facets - search refinement --- ## Morphing Island URL: https://annnimate.com/animations/morphing-island Category: ui-component Keywords: pill, morph, navigation, section-nav, sticky, dynamic-island, elastic 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. Use cases: - long marketing pages with a handful of chapters - case-study and campaign pages - product pages with feature sections - one-page sites that need a nav that stays out of the way --- ## Pricing URL: https://annnimate.com/animations/pricing Category: section Keywords: pricing, section, toggle, billing, digit-roll, saas, sports A pricing section with a monthly/yearly switch. Flip it and every price rolls to its new number digit by digit and a savings chip pops in, while each plan name carries a constant shimmer. Use cases: - SaaS pricing page - agency pricing section - subscription plan comparison --- ## Scatter Cluster URL: https://annnimate.com/animations/scatter-cluster Category: scroll Keywords: scroll, scrub, scatter, cluster, cards, sticky, editorial, sports A scroll-driven section where a jumble of photo and stat cards piled in the center scatters out to its resting places as you scroll, uncovering the headline underneath. Scrolling back pulls the cluster together again. Use cases: - brand statement - capability overview - about or manifesto section - collection intro --- ## Photo Stack Gallery URL: https://annnimate.com/animations/photo-stack-gallery Category: ui-component Keywords: gallery, stack, motion-path, curve, unfold, strip, featured-image, swap, odometer, gsap, ui-component A tight stack of photos that unfolds into a strip and one large featured image on click. Click a strip photo to promote it to the feature - the one it replaces slides straight back into the strip. Use cases: - Portfolio / Lookbook Gallery - Product Variant Picker --- ## Dither Cursor Trail URL: https://annnimate.com/animations/dither-cursor-trail Category: shader Keywords: shader, webgl, three.js, dither, bayer, cursor, trail, particles, glsl, interactive A soft trail follows the pointer and breaks into chunky ordered-dither dots as it fades - wide and solid near the cursor, thinning into scattered specks toward the tail. Good for a hero backdrop or an editorial section that wants an interactive layer without any imagery. Different from our Dithering component: that one is a Bayer filter laid over a photo or video with a cursor lens, this one uses the dither pattern as the renderer for a live decaying field, with no image involved. On touch devices, dragging a finger splats the trail; a single tap does not. Use cases: - Hero backdrop that reacts to the visitor's pointer without any photography - Editorial or portfolio section that wants a quiet interactive texture - Product or landing page micro-interaction that rewards moving the mouse - Loading or empty-state surface with a bit of tactile life --- ## Spiral Gallery URL: https://annnimate.com/animations/spiral-gallery Category: ui-component Keywords: webgl, three, 3d, gallery, helix, spiral, drag, inertia, scroll, infinite, portfolio An infinite vertical helix of image cards, climbing and orbiting a central axis like a winding staircase seen from inside it. Drag to spin, release to let the speed carry over and decay, or just scroll the page to speed it up. Use cases: - portfolio image gallery - brand site showcase - agency work index - product lookbook --- ## ASCII Overlay URL: https://annnimate.com/animations/ascii-overlay Category: shader Keywords: shader, webgl, three.js, ascii, scroll, scrolltrigger, image, video, typography, glsl Data-styled characters bloom over a real photo or video as you scroll, tinted to the colours underneath and only appearing in the brighter areas. The photo itself never disappears - unlike ASCII effects that replace the image with characters entirely, this one only adds to it. Use cases: - Hero image reveal that reads as the photo being scanned or decoded - Portfolio or case-study section that adds a data motif without hiding the photography - Product photography with a tech-forward, generative texture on top - Editorial scroll storytelling section with a slow-burn reveal --- ## Text On Path URL: https://annnimate.com/animations/text-on-path Category: scroll Keywords: scroll, text, svg, kinetic-type, editorial, scrolltrigger 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. The line itself is never drawn - only the words describe its shape. Use cases: - Editorial manifesto statements - Section transitions --- ## Lens Rail URL: https://annnimate.com/animations/lens-rail Category: ui-component Keywords: slider, gallery, carousel, draggable, scale, lens, product, images A strip of photos you drag sideways. Whichever one passes the middle grows large, like sliding it under a magnifying glass, then shrinks again as it moves on. Use cases: - product or catalog strip - portfolio browser - gallery rail - collection showcase --- ## Grid Chapters URL: https://annnimate.com/animations/grid-chapters Category: section Keywords: scroll, scrub, parallax, chapters, grid, hairline, editorial, sticky, sports A three-chapter scroll story built on a visible grid, with an image and a headline for each chapter. The text stays pinned in the center and swaps line by line as you cross into each chapter, while the images drift past at their own speeds. Use cases: - brand story chapters - product line-up - process walkthrough - editorial scroll story --- ## Text Fill Wave URL: https://annnimate.com/animations/text-fill-wave Category: scroll Keywords: scroll, text, color-fill, gradient, wave, editorial, kinetic-type, scrolltrigger A big headline that fills in color as it enters the viewport, with a bright accent wave riding the edge of the fill line by line. Can also be tied to the scrollbar. Use cases: - brand statement - hero headline - manifesto section - sports brand --- ## Feature Dialog URL: https://annnimate.com/animations/feature-dialog Category: ui-component Keywords: dialog, sheet, modal, expand, fullscreen, interactive, ui-component A preview tile with an expand button that opens a tall centered dialog - the page dims and blurs behind it, the dialog rises in with a fast fade, and a gradient band follows it up. Focus, Escape and the backdrop are all wired up. Use cases: - Feature quick view - Product quick view - Case study preview --- ## Network Globe URL: https://annnimate.com/animations/network-globe Category: section Keywords: globe, canvas, map, locations, drag, editorial, footer A "where we operate" section built around a dotted globe you can drag and spin. Pick a store from the pill or click a marker and the globe turns to face it, its label rises in, and the routes to it draw outward. Use cases: - store locator - where we operate - global presence - shipping / distribution map - team locations --- ## Dock Footer URL: https://annnimate.com/animations/dock-footer Category: section Keywords: footer, dock, glass, morph, parallax, scroll, nav, editorial, dark A full drop-in footer section that earns the end of the page. The footer is uncovered with a parallax scrub as you scroll to it, then the content cascades up through per-element masks once it seats - logo, brand line, link columns, left to right. A frosted-glass dock pill floats over a defocused full-bleed canvas; click it (or just reach the very bottom of the page) and one glass object morphs from pill to quick-nav panel, the nav links rising through their masks as it forms. Esc, click-outside and scrolling away all close it. Use cases: - site footer - brand footer - sports brand - editorial footer - quick navigation --- ## Multi-Step Form URL: https://annnimate.com/animations/multi-step-form Category: ui-component Keywords: form, multi-step, validation, stepper, contact-form, wizard, masked-transition A three-step contact form that slides between steps with a direction-aware transition, floats its labels on focus, and morphs its send button into a loading dot then a checkmark on submit. Use cases: - contact forms - lead capture forms - signup wizards - onboarding flows - quote request forms --- ## Image Glitch URL: https://annnimate.com/animations/image-glitch Category: shader Keywords: shader, webgl, three.js, glitch, crt, vhs, analog, tv, interactive, hover, image, glsl Put a full-cover image behind old CRT glass. At rest it just sits there looking like a television set: curved barrel distortion, a scanline raster, phosphor vignette, faint chroma fringe. Hover and the signal starts fighting itself. It breaks into static, almost recovers, then static wins. Sync tears, analog snow, vertical hold slips, color bleed. Let go and it locks back in clean. Switch to digital mode with data-anm-tv="false" for a flat clean image that tears into coarse block-slice displacement and quantized corruption on hover instead. Hold trigger mode also available. Use cases: - Hero image with an old-TV signal-loss moment on hover - Retro or archival editorial sections, music and fashion brand sites - Hover state for a full-bleed cover image --- ## Curtain Slider URL: https://annnimate.com/animations/curtain-slider Category: ui-component Keywords: slider, carousel, curtain, wipe, clip-path, hero, full-bleed, gallery, swipe, gsap, ui-component A full-bleed image slider where each slide change plays a staggered curtain: the outgoing image is divided into twelve columns and each column's clip edge wipes sideways one after another, revealing the next image settling into place beneath. Title, chapter label, and index roll between slides, with arrow, drag, and keyboard navigation built in. Use cases: - Homepage Hero Slider - Case Study / Work Showcase - Editorial Story Slider --- ## Morphing Tabs URL: https://annnimate.com/animations/morphing-tabs Category: ui-component Keywords: tabs, morphing, svg-path, fillet, interactive, gsap, splittext, ui-component Tabs where the highlight pill is joined to the content panel below by a smooth curved neck that follows it as it moves. Use it for product specs, pricing details, or any section that swaps content in place. Use cases: - Product spec sheets - Pricing plan comparisons --- ## Flip Filter URL: https://annnimate.com/animations/flip-filter Category: section Keywords: flip, filter, grid, list-view, product-grid, pill, sports A filterable product grid where clicking a category flies every card smoothly to its new spot instead of jumping, and a toggle switches the whole thing between grid and list without losing your place - cards farthest from home always move last. Use cases: - filterable product or collection section - portfolio or case-study index with category filters - shop category landing with grid and list modes - searchable directory section --- ## Capsule Hero URL: https://annnimate.com/animations/capsule-hero Category: section Keywords: hero, video, clip-path, expand, editorial, sports A full-screen hero where two giant letters split apart to reveal a video framed inside a rounded capsule window. Click the capsule to expand the video to fill the whole screen, click again to shrink it back. Use cases: - product launch hero - brand film reveal - collection landing page - campaign teaser --- ## Morphing Accordion URL: https://annnimate.com/animations/morphing-accordion Category: ui-component Keywords: accordion, faq, gooey, metaball, morphing, svg-filter, interactive, gsap, splittext, ui-component 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. Use cases: - FAQ sections - Spec or feature comparisons --- ## Scale Slider URL: https://annnimate.com/animations/scale-slider Category: ui-component Keywords: slider, gallery, carousel, draggable, scroll, infinite, scale, editorial, images 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. Use cases: - roster or team showcase - product/collection browser - portfolio slider - editorial feature strip --- ## Morphing Select URL: https://annnimate.com/animations/morphing-select Category: ui-component Keywords: select, dropdown, gooey, svg-filter, form, keyboard-navigation A select field whose dropdown panel is born from the trigger with a liquid gooey separation, then rolls its value into place on selection. Use cases: - filter dropdowns - settings selects - form fields - sort/view selectors --- ## Morphing Pill Menu URL: https://annnimate.com/animations/morphing-pill-menu Category: menu Keywords: menu, pill, navigation, morph, glass, elastic, interactive, gsap 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. Use cases: - brand or campaign site navigation - portfolio and studio site nav - product drop or collection landing pages - member and community site headers --- ## Expanding Strip URL: https://annnimate.com/animations/expanding-strip Category: ui-component Keywords: gallery, slider, hover, editorial, images, keyboard-navigation A row of tall photo panels, edge-to-edge. Hover one and it blooms wide while the rest compress to make room, then the title rises inside it. Use cases: - roster or team showcase - portfolio browser - editorial feature strip - product collection reveal --- ## Index Wipe URL: https://annnimate.com/animations/index-wipe Category: ui-component Keywords: index, hover-list, wipe, clip-path, editorial, sports A full-screen index of names or chapters where hovering one wipes its photo into the background from the direction you're moving and rolls the counter to match. Use cases: - editorial section index - collection or lookbook chapter list - team roster navigation - case study index --- ## Image Fly-In URL: https://annnimate.com/animations/image-fly-in Category: experimental Keywords: 3d, depth, manifesto, editorial, parallax, cursor, ambient Imagery continuously flies in from deep inside the page toward the viewer, fading in and out around a central zone that stays clear for your content. The whole field glides softly with your cursor. Use cases: - brand manifesto - hero statement - about section - sports brand --- ## Wipe Slider URL: https://annnimate.com/animations/wipe-slider Category: section Keywords: slider, hero, wipe, clip-path, carousel, editorial, sports A full-screen hero slider where every change of slide wipes the background open from the direction you're heading, while the title and copy mask out and back in and the counter rolls to the next percentage. Use cases: - product collection hero - campaign slider - seasonal drop showcase - brand story intro --- ## Step Wipe URL: https://annnimate.com/animations/step-wipe Category: section Keywords: scroll, scrub, wipe, clip-path, sticky, editorial, product, sports A tall scroll-driven section that wipes between product steps as you scroll, with the background and the centred card clipping open together, and the title, step number and description swapping in sync at each step. Use cases: - product line-up - step-by-step story - collection walkthrough - process reveal --- ## Card Fan URL: https://annnimate.com/animations/card-fan Category: ui-component Keywords: cards, stack, fan, hover, gallery, arc, spread, reveal, back-out, stagger, gsap, ui-component A tight stack of image cards that fans open into a slight arc when you hover it, then feathers back to rest when you leave. Hovering an individual card blooms the whole fan a little wider - most from the outer cards, least from the center - while the one you're on lifts to the front. Use cases: - Featured Work / Campaign Teaser - Photo / Portfolio Preview - Testimonial / Quote Cards --- ## Radial Gallery URL: https://annnimate.com/animations/radial-gallery Category: ui-component Keywords: gallery, carousel, ring, orbit, rotation, ambient, hover, decorative, gsap, ui-component, footer, hero-backdrop A slow-spinning ring of image cards that works out how many fit the screen on its own, so it always looks even. Drop it behind a hero or a call to action as a moving backdrop, as two half-rings off the edges or one full ring behind your content. Use cases: - Footer Backdrop Gallery - Hero Section Backdrop - Portfolio / Work Showcase --- ## Detail Drawer URL: https://annnimate.com/animations/detail-drawer Category: ui-component Keywords: drawer, panel, detail-view, clip-path, parallax, line-mask, split-text, interactive, gsap, ui-component, product-detail, overlay General-purpose content drawer that pushes against the page it's triggered from. The entire full-bleed hero (image + headline) is the trigger - clicking it slides in a detail panel with a parallax x + clip-path reveal while the hero image translates away, scales up, and darkens under an overlay. Panel content reveals starting halfway through the entrance: text blocks wipe in via a per-line mask reveal, image blocks simply fade in. Closing reverses the entire choreography. Use cases: - E-commerce Product Detail Panels - Case Study / Project Detail Reveals - Article / Editorial Quick Reads --- ## Gradient Footer URL: https://annnimate.com/animations/gradient-footer Category: section Keywords: footer, gradient, glow, scroll, wordmark, split-text, editorial, dark A drop-in footer with a soft glow rising off the bottom edge and a giant brand name that scales to fill the width no matter how long it is. The links get a slide-through underline on hover and the whole thing fades up as you scroll to it. Use cases: - site footer - brand footer - editorial footer - sports brand --- ## Testimonial Globe URL: https://annnimate.com/animations/testimonial-globe Category: section Keywords: webgl, 3d, globe, testimonials, drag, editorial, landscape A full drop-in testimonial section with a draggable WebGL sphere of image planes as the section's visual layer. The headline sits in its own block above the globe stage; three frosted-glass testimonial cards float in a staggered diagonal 12-col grid inside the stage, letting the globe blur through them. Globe fills the stage absolutely behind the cards; pointer-events on the globe stays active in the negative space between cards. Light canvas, frosted-glass cards (rgba white + backdrop-filter blur), slow autoplay drift, drag-plus-inertia model, golden-angle plane placement, cover-fit UV for any image aspect ratio. Card layer rises and fades in on scroll-enter with a stagger. Globe images are configurable from a hidden HTML list (default: 16 landscape 1456x816 sports files). Mobile-first: globe is off by default on narrow screens (cards stack vertically); enable with data-anm-mobile-globe. VANTA editorial-sports demo brand. Use cases: - athlete testimonials - team showcase - customer stories - editorial feature --- ## Dithering URL: https://annnimate.com/animations/dithering Category: shader Keywords: shader, webgl, three.js, background, dithering, bayer, retro, glsl, 1-bit, ambient, image, video A 2-color dithering shader for images and video. Point it at any img or video and it renders as an animated Bayer-dithered halftone (2x2, 4x4, 8x8, or random threshold), with a cursor reveal lens that recolours the dots with the real source under the mouse and a faint ambient shimmer in the dark areas. A 1-bit retro/print treatment for hero images, video backdrops, and editorial media. Use cases: - Hero section ambient background with a 1-bit retro aesthetic - Stylized image or video treatment (dither any media source) - Dark-mode landing page overlay with transparency - Section backgrounds that need a print/risograph look --- ## Drift Gallery URL: https://annnimate.com/animations/drift-gallery Category: section Keywords: 3d, webgl, conveyor, draggable, editorial, gallery, perspective A full-viewport WebGL card deck (Three.js): a fanned diagonal of collection images that surfs from the bottom-left up to the top-right corner. Drag to throw the deck (Draggable + Inertia) or let it drift on autoplay. The cursor magnetically parts the cards around it, hovering a card lifts it and syncs a live detail panel (index, title, category, code), and the whole frame carries a filmic grade - chromatic aberration, grain and vignette. Aspect-responsive: the deck anchors identically at any viewport width, and collapses to a touch-friendly focal-card layout on mobile. VANTA FW26 editorial-sports demo brand. Use cases: - collection gallery - product drop - portfolio showcase - editorial feature --- ## Velocity Type URL: https://annnimate.com/animations/velocity-type Category: scroll Keywords: scroll, velocity, variable-fonts, typography, font-variation-settings, kinetic-type, interactive, dynamic Scroll velocity-reactive variable typography. Type gains weight, width, and slant from scroll speed, and in directional mode leans into the scroll direction, then eases back to its resting axes when scrolling stops. Driven by scroll velocity, not scroll progress, and written through font-variation-settings. Built for kinetic editorial headlines and momentum-driven display type. Use cases: - Kinetic Editorial Headline - Section Title Feedback - Slanted Display Type - Performance-conscious Mobile Setup --- ## Gooey Hover Reveal URL: https://annnimate.com/animations/gooey-hover-reveal Category: shader Keywords: shader, webgl, three.js, gooey, cursor, sdf, glsl, interactive, hover, reveal Draw across the surface to reveal what is underneath. A WebGL fragment shader paints a solid cover over your content. As the cursor moves, gooey blobs spawn along the path and merge into a continuous liquid trail that cuts a hole through the cover. Stop moving and the trail implodes toward its centroid and vanishes. Nothing is revealed until the cursor moves. Works great on hero sections and product pages where you want the reveal to feel earned. Use cases: - Hero section cursor interaction - Creative portfolio hover effects - Content reveal on mouse movement - Interactive backgrounds --- ## Gooey Menu URL: https://annnimate.com/animations/gooey-menu Category: experimental Keywords: fab, menu, gooey, metaball, svg-filter, interactive, gsap, experimental A floating action button that fans out child actions on click. An SVG feGaussianBlur and feColorMatrix filter wraps the whole stage so the buttons read as a single liquid blob at rest and separate cleanly as they travel. Five spread patterns: arc, line, grid, radial-360, cluster. Stagger and radius are both configurable. Use cases: - Floating CTA cluster on marketing pages - Share button with multiple social targets - Contact widget (email, chat, call) above the fold - Filter trigger expanding to filter options - Reaction picker on social or e-commerce - Product variant picker (color, size) - Notification action surface - Contextual toolbar for canvas or editor apps --- ## Typewriter URL: https://annnimate.com/animations/typewriter Category: ui-component Keywords: text, typewriter, typing, looping, cursor, animated-text, hero, ui-component Cycles through a list of phrases with a character-by-character typewriter effect. Each phrase types out, pauses, then deletes before the next begins. Type speed, delete speed, and pause durations are all configurable via data attributes. Pure GSAP timeline sequencing. No setInterval, no setTimeout. Use cases: - Hero text rotators: cycle through value props on the landing page ("I help founders ship faster.", "...build calmer teams.", "...launch on time.") - Terminal and CLI-styled product pages where typing rhythm sells the vibe - AI chat empty states - mock a thinking assistant typing out suggestions - Portfolio intros that swap roles or skills ("designer.", "developer.", "founder.") - Onboarding placeholders that hint at what to type next, without being intrusive --- ## Mega Menu URL: https://annnimate.com/animations/mega-menu Category: menu Keywords: menu, mega-menu, navigation, dropdown, hover, morphing, shared-container, direction-aware, multi-column, preview-pane, interactive, gsap, fixed-header, saas, ecommerce, ui-component One dropdown container that morphs in height as you move between groups. Hover-intent open delay prevents accidental fires. Direction-aware reveal animates content in from whichever side you came from. A sliding underline tracks the active trigger. Falls back to a click accordion on mobile. Use cases: - Ecommerce Header Navigation - SaaS Product Navigation - Agency or Studio Site --- ## Multi-Level Drawer Menu URL: https://annnimate.com/animations/multi-level-drawer-menu Category: menu Keywords: menu, drawer, navigation, multi-level, cascading, overlay, interactive, gsap, ecommerce, sidebar, ui-component Cascading two-panel drawer menu for sports, ecommerce and editorial brands. Panel 1 reveals from the left via clip-path with rounded corners; primary categories stagger in with opacity + x. Hovering a primary that has a sublist reveals Panel 2 next to it with its own clip-path Lā†’R animation. A dim overlay tints the page underneath while the trigger stays clickable above. On mobile the second panel collapses into a click-driven drill-down that slides in from the right with a Back button. Use cases: - Ecommerce Category Navigation - Agency & Portfolio Sites - SaaS Product Navigation - Editorial & Lifestyle Brands --- ## Dual Scramble URL: https://annnimate.com/animations/dual-scramble Category: ui-component Keywords: text, scramble, interactive, scroll, hover Two-phase text scramble: text scrambles through a brand-accent color, then resolves to its final foreground. Five triggers: scroll (default), hover, click, load, manual. Group wrapper staggers multiple elements with a shared trigger. Zero layout shift via stacked-span DOM. Screen readers get the real text. Reduced-motion resolves instantly. Use cases: - hero headlines - navigation labels - interactive copy - scroll reveals --- ## Fullscreen Slide Menu URL: https://annnimate.com/animations/fullscreen-slide-menu Category: menu Keywords: menu, fullscreen, navigation, overlay, interactive, gsap, hamburger, image-hover, page-transform, ui-component Cinematic fullscreen menu where the page slides, rotates and scales away while a dark overlay slides in from the top-left ā€” a single seamless motion that feels like turning a page. Includes a burger-to-X icon morph, label track swap (Menu / Close), and an image panel that reveals a different image per nav link via clip-path. Use cases: - Agency & Portfolio Sites - Ecommerce Category Nav - Editorial & Magazine - SaaS Landing Pages --- ## Mesh Gradient URL: https://annnimate.com/animations/mesh-gradient Category: shader Keywords: shader, webgl, three.js, background, gradient, mesh-gradient, fluid, glsl, ambient Full-canvas animated mesh gradient using up to 8 color anchor points that orbit slowly in independent elliptical paths. Colors blend based on proximity to each anchor, exactly like a real mesh gradient. The cursor physically stirs the colors via a Navier-Stokes fluid sim ā€” drag, swirl, and settle. Use cases: - Hero section ambient background - Section backgrounds to add depth without images - Dark-mode landing page atmosphere - Loading screen background while content fetches --- ## Image Dissolve Scroll URL: https://annnimate.com/animations/image-dissolve-scroll Category: shader Keywords: shader, webgl, three.js, dissolve, scroll, image, noise, glsl WebGL dissolve effect where images transition using fBm noise shaders on scroll. Built with Three.js and GSAP ScrollTrigger. Each scroll movement drives the shader dissolve progress, creating organic texture-based transitions between images. Use cases: - Hero section image reveal on scroll - Portfolio piece transition - Article image fade-out with stylized edge - Product shot dissolve for scroll storytelling --- ## Circular Slider URL: https://annnimate.com/animations/circular-slider Category: ui-component Keywords: carousel, circular, drag, motionpath, gsap, interactive, slider Circular progress slider with draggable handle. Users drag around the circle to set values 0-100. Built with GSAP Draggable. Smooth arc drawing with configurable colors and stroke widths. Perfect for volume controls, ratings, and circular inputs. Use cases: - Hero Section Carousels - Portfolio Project Showcases - Ambient Decorative Carousels - Product Feature Highlights - Team Member Carousels --- ## Character Appear URL: https://annnimate.com/animations/character-appear Category: scroll Keywords: scroll, reveal, scrolltrigger, gsap, splittext, typography, text, opacity, fade Characters fade in one by one as you scroll, creating a typewriter reveal effect without any movement. Each character appears with pure opacity transitions, either sequentially or in random order for a scattered look. Works best for hero headlines, product announcements, and any text where you want dramatic character-level reveals. Use cases: - Hero Headlines with Impact - Product Launch Announcements - Cinematic Scroll Reveals - Section Headers with Personality - Interactive Story Sections --- ## Multi Flip URL: https://annnimate.com/animations/multi-flip Category: scroll Keywords: scroll, flip, multiple-targets, grid, stagger, scrolltrigger, card-reveal Multiple elements flip from a stacked pile to scattered grid positions on scroll. Cards start overlapped with random rotations, then smoothly transform to their final zones. Works best for product grids, portfolios, and gallery reveals where you want dramatic organization. Use cases: - Product Grid Reveals - Portfolio Project Showcase - Feature Card Organization - Team Member Reveals - Gallery Organization --- ## Tooltip URL: https://annnimate.com/animations/tooltip Category: ui-component Keywords: tooltip, popover, hover, interactive, gsap, flip, ui-component, contextual-help, edge-detection Smart tooltips that follow cursor or anchor to elements. Built with GSAP for smooth positioning. Auto-detects viewport edges and flips to prevent overflow. Configurable delay, positioning, and triggers. Perfect for help text and contextual information. Use cases: - Icon Button Labels - Form Field Help Text - Technical Term Definitions - Keyboard Shortcut References - Feature Hints and Onboarding - Status and Error Messages --- ## Text Morph URL: https://annnimate.com/animations/text-morph Category: ui-component Keywords: text, morph, typing, interactive, gsap, ui-component, search, input, flip Characters morph smoothly as user types. Uses GSAP Flip for position transitions when characters shift. Optimized fast typing skips unnecessary animations. Perfect for search bars and dynamic headlines where text feels alive and responsive to input. Use cases: - Dynamic Search Interfaces - Interactive Headlines - Live Preview Fields - Animated Form Labels - Dynamic Product Titles - Chat Message Previews --- ## Morphing Dialog URL: https://annnimate.com/animations/morphing-dialog Category: ui-component Keywords: dialog, modal, morph, view-transitions, native-dialog, interactive, ui-component, overlay Dialog that morphs from trigger to expanded state using GSAP Flip. Elements with matching data-flip-id smoothly transition position and scale. Elements unique to the dialog scale and fade in. Perfect for product quick views and expandable cards. Use cases: - E-commerce Product Quick Views - Portfolio Image Lightboxes - Expandable Feature Cards - Settings and Preference Panels --- ## Infinite Parallax Slider URL: https://annnimate.com/animations/infinite-parallax-slider Category: ui-component Keywords: slider, carousel, parallax, draggable, swipe, touch, infinite, loop, gsap, interactive, ui-component, navigation, autoplay Infinite horizontal slider with parallax layers. Slides loop seamlessly with different scroll speeds per layer creating depth. Auto-plays with pause on hover. Built with GSAP. Perfect for testimonials, logos, and feature showcases. Use cases: - Product Showcases and Galleries - Hero Section Image Sliders - Portfolio Project Displays - Testimonials with Photos - Feature Highlights with Images - Case Study Carousels --- ## Image Follow List URL: https://annnimate.com/animations/image-follow-list Category: ui-component Keywords: list, hover, image, cursor, interactive, gsap, ui-component, portfolio, catalog Hovering list items shows corresponding images that follow cursor. Image smoothly transitions between items with GSAP animation. Cursor-following effect creates premium interactive feel. Perfect for portfolio lists, product menus, and project showcases. Use cases: - Product Catalog Navigation - Portfolio Project Listings - Team Member Directories - Blog Post Listings with Featured Images - Service Listings with Imagery - Case Study Galleries --- ## Hoverable List URL: https://annnimate.com/animations/hoverable-list Category: ui-component Keywords: list, hover, navigation, svg, interactive, gsap, ui-component, menu List items fill with organic SVG curves that morph based on mouse direction. Detects whether cursor enters from top or bottom and animates path accordingly. Text shift and color change via CSS hover. Perfect for navigation menus with premium feel. Use cases: - Primary Navigation Menus - Interactive Feature Lists - Portfolio Project Listings - Footer Link Sections - Dashboard Sidebar Navigation - Category Filter Lists --- ## Accordion URL: https://annnimate.com/animations/accordion Category: ui-component Keywords: accordion, faq, collapse, expand, interactive, gsap, splittext, ui-component, content, text-animation Smooth GSAP-powered accordion for expandable FAQ sections. Click triggers to reveal content with animated height and icon transformations. Optional line-staggered text reveal using SplitText mask. Configure single or multiple open items. Perfect for FAQs and product details. Use cases: - FAQ Knowledge Bases - Product Specification Panels - Mobile Navigation Menus - Documentation Sections - Settings Configuration Panels --- ## Velocity Clip URL: https://annnimate.com/animations/velocity-clip Category: scroll Keywords: scroll, velocity, clip-path, distortion, momentum, interactive, dynamic, warp Scroll velocity-based clip path animation. Elements clip and unclip based on scroll speed and direction. Fast scrolling creates more aggressive clipping. Perfect for kinetic editorial layouts and dynamic headers. Use cases: - Hero Section Kinetic Headers - Image Gallery Scroll Feedback - Product Showcase with Momentum - Editorial Images with Skew Effect - Custom Clip Path Transitions --- ## Text Split Zoom URL: https://annnimate.com/animations/text-split-zoom Category: scroll Keywords: scroll, zoom, scrolltrigger, gsap, image, text, reveal, split, enter Dramatic animation where an image zooms from nothing to full size between split text, pushing the text apart. Wrapper width expands naturally creating text-splitting effect. Supports scroll-linked scrub or on-enter trigger. Perfect for hero sections and product launches. Use cases: - Hero Section Dramatic Reveals - Product Launch Announcements - Portfolio Project Showcases - Editorial Story Highlights - Sports Action Photography --- ## Text Scramble URL: https://annnimate.com/animations/text-scramble Category: scroll Keywords: scroll, text, scramble, kinetic, reveal, interactive, gsap Text scrambles through random characters before revealing final content. Cycles each character through chosen charset (uppercase, numbers, binary, etc.) with customizable speed and stagger. Supports scroll, hover, and click triggers. Perfect for dynamic reveals and tech aesthetics. Use cases: - Tech Product Hero Headlines - Interactive Hover Effects - Loading Status Transitions - Editorial Typewriter Effect - Data Visualization Labels --- ## Text Reveal URL: https://annnimate.com/animations/text-reveal Category: scroll Keywords: scroll, reveal, scrolltrigger, gsap, splittext, typography, text Text reveals word by word or character by character as you scroll. Uses SplitText to break text into pieces, then animates each with a stagger effect. Perfect for hero headlines where typography needs impact. Use cases: - Hero Headlines - Testimonial Quotes - Editorial Article Headers - Pinned Hero Sections - Feature Section Headings --- ## SVG Draw Path URL: https://annnimate.com/animations/svg-draw-path Category: scroll Keywords: scroll, svg, draw, path, reveal, drawsvg, scrolltrigger Draw SVG paths on scroll using GSAP DrawSVG. Stroke animates from 0% to 100% as you scroll through the trigger zone. Works with any SVG path element. Perfect for line art, illustrations, and decorative elements. Use cases: - Route Visualizations and Maps - Data Flow Diagrams and Processes - Timeline Illustrations - Interactive Infographics - Logo Reveals and Brand Animations --- ## Rectangle Text Reveal URL: https://annnimate.com/animations/rectangle-text-reveal Category: scroll Keywords: scroll, text, reveal, rectangle, wipe, lines, typography, editorial, splittext Lines of text revealed one by one as rounded rectangles wipe away. Each line has overlay rectangle that scales from full width to zero while text slides in from behind. Creates elegant editorial reveal perfect for paragraphs and testimonials. Use cases: - Editorial Statements and Manifestos - Testimonial Quotes with Drama - Hero Section Paragraphs - Feature Descriptions with Direction Flow - Scroll-Linked Editorial Reveals --- ## Progress URL: https://annnimate.com/animations/progress Category: scroll Keywords: scroll, progress, indicator, scrolltrigger, gsap, reading, navigation Visual scroll progress that tracks user position through content. Three variants: circular ring with percentage, horizontal bar, and minimal text counter. Both circular and bar use dual-layer system with muted background track and active progress layer. Perfect for long-form content and reading experiences. Use cases: - Long-Form Article Reading Progress - Landing Page Section Tracking - Documentation Navigation Aid - Portfolio Case Study Completion - Course Content Modules --- ## Popping Text URL: https://annnimate.com/animations/popping-text Category: scroll Keywords: scroll, text, popping, splittext, typography, reveal, staircase Characters pop into place sequentially, scaling from zero with random rotation and back.out bounce. Uses SplitText to split text into characters. Top-left transform origin creates organic playful feel. Perfect for bold statements with diagonal staircase layout. Use cases: - Hero Headline Reveals - Product Feature Titles - Statement Typography Sections - Minimal Clean Headlines - Sequential Call-to-Action Text --- ## Parallax URL: https://annnimate.com/animations/parallax Category: scroll Keywords: scroll, parallax, scrolltrigger, gsap, depth, layered Elements move at different speeds as you scroll, creating depth. Slower speeds for backgrounds, faster for foreground creates layered effect. Perfect for hero sections where you want that premium feel. Use cases: - Hero Section Depth Layers - Product Showcase Backgrounds - Horizontal Logo Marquees - Storytelling Section Transitions --- ## Mask Reveal URL: https://annnimate.com/animations/mask-reveal Category: scroll Keywords: scroll, mask, reveal, clip-path, image, cinematic, visual, hero Progressive mask reveal where content expands or contracts through shape masks on scroll. Supports circle, oval, rectangle, blob, custom clip-paths, and image masks. Direction controls reveal (in) or hide (out). Perfect for dramatic cinematic reveals. Use cases: - Hero Section Image Reveals - Product Launch Unveilings - Brand Identity Moments - Storytelling Transitions - Portfolio Project Showcases --- ## Infinite Draggable Grid URL: https://annnimate.com/animations/infinite-draggable-grid Category: scroll Keywords: scroll, grid, drag, infinite, gsap, interactive, gallery Horizontal draggable grid with infinite looping. Users can drag to scroll through items with momentum. Grid seamlessly loops when reaching the end. Built with GSAP Draggable. Perfect for image galleries and product carousels. Use cases: - Portfolio Image Galleries - E-commerce Product Showcases - Creative Agency Case Studies - Event Photo Walls - Interactive Brand Lookbooks --- ## Hide Header URL: https://annnimate.com/animations/hide-header Category: scroll Keywords: scroll, navigation, header, navbar, hide, show, directional, scrolltrigger Smart navigation that hides when scrolling down, shows when scrolling up. Features threshold-based triggering, element triggers, and visible zones where header stays shown regardless of direction. Maximizes content space while keeping navigation accessible. Use cases: - Long-Form Article Navigation - E-commerce Product Pages - Landing Pages with Hero - Mobile-First Content Sites - Documentation Sites --- ## Folding Text URL: https://annnimate.com/animations/folding-text Category: scroll Keywords: scroll, text, 3d, folding, perspective, splittext, typography, editorial Characters fold and unfold in 3D as you scroll, creating dramatic editorial reveals. Uses SplitText to split text into characters, then rotates each on X or Y axis with perspective. Control fold direction, timing, and stagger for cinematic typography. Use cases: - Hero Headline Reveals - Editorial Typography Sections - Product Showcase Titles - Landing Page Statement Text - Cinematic Video/Photo Captions --- ## Flip Zone URL: https://annnimate.com/animations/flip-zone Category: scroll Keywords: scroll, flip, morph, zones, scrolltrigger, product-showcase Media element seamlessly transitions between different zones using GSAP Flip. Smoothly morphs position, size, and rotation to fit each zone container as you scroll. Perfect for immersive product showcases and storytelling. Use cases: - Product Showcases with Context - Immersive Brand Storytelling - Feature Walkthroughs - Portfolio Project Deep Dives - Image Gallery with Context --- ## Element Reveal URL: https://annnimate.com/animations/element-reveal Category: scroll Keywords: scroll, reveal, fade, slide, scale, stagger, scrolltrigger Six ways to reveal elements on scroll: fade, slide up, scale, clip path, blur fade, or rotate. Add stagger timing for that one-after-another effect. Works great for card grids, galleries, and feature sections. Use cases: - Product Card Grids - Feature Section Lists - Portfolio Image Galleries - Blog Article Content Blocks - Hero Content Sequences --- ## Counter URL: https://annnimate.com/animations/counter Category: scroll Keywords: scroll, counter, numbers, scrolltrigger, gsap, statistics, metrics Two counter modes for different needs. Rolling digits create that odometer effect where each digit spins independently. Simple count mode increments smoothly for decimals and smaller numbers. Add currency symbols, percentages, or custom units with prefix and suffix. Use cases: - Statistics Hero Sections - Pricing Tables with Dynamic Values - Portfolio Achievement Metrics - Real-time Analytics Dashboards - Social Proof Indicators --- ## Cinematic Text URL: https://annnimate.com/animations/cinematic-text Category: scroll Keywords: scroll, text, reveal, cinematic, editorial, typography, hero, splittext Large typography reveals with cinematic slide-in from sides. Supports manual line markup or automatic SplitText splitting by lines, words, or chars. Each split type has optimized stagger timing. Creates that editorial movie-title feel perfect for hero sections. Use cases: - Hero Section Headlines - Editorial Subheadings - Typewriter Quote Reveals - Brand Manifesto Pages - Product Launch Taglines --- ## Background Color URL: https://annnimate.com/animations/background-color Category: scroll Keywords: scroll, background, color, scrolltrigger, gsap, zones, theme Smoothly transition section background and text colors as you scroll through content zones. Each zone defines its own colors with smooth transitions. Perfect for creating distinct visual sections without hard breaks. Use cases: - Multi-Section Landing Pages - E-Commerce Category Transitions - Portfolio Mood Sections - Long-Form Editorial Content - Brand Story Presentations --- ## Animated Grid URL: https://annnimate.com/animations/animated-grid Category: scroll Keywords: scroll, grid, parallax, scrollsmoother, scrolltrigger, gsap, elastic, multi-column, images Multi-column image grid with four scroll-linked parallax effects powered by ScrollSmoother. Choose elastic, wave, center-pull, or elastic-stretch modes for dynamic grid layouts. Requires ScrollSmoother setup with smooth wrapper. Use cases: - Portfolio Grids with Elastic Depth - Action Photography with Stretch Effect - Editorial Photo Layouts with Wave Effect - Product Showcase with Center Focus - Landing Page Hero Image Grids --- ## Text Shimmer Wave URL: https://annnimate.com/animations/text-shimmer-wave Category: experimental Keywords: text, shimmer, wave, continuous, 3d, loop, highlight, character, split-text, kinetic, hero, headline, attention Shimmering wave effect flows across text characters. Built with SplitText and GSAP. Characters shimmer sequentially creating flowing highlight. Supports scroll trigger or continuous loop. Perfect for headings and attention-grabbing text. Use cases: - Hero Section Headlines - Loading State Text - Brand Taglines with Impact - Feature Announcement Headers - Animated Logo Text --- ## Random Rotate URL: https://annnimate.com/animations/random-rotate Category: experimental Keywords: hover, rotation, random, playful, interactive, experimental Elements get random rotation on scroll reveal. Each item rotates to unique angle for organic playful layouts. Built with ScrollTrigger. Customizable rotation range and timing. Perfect for image grids, card layouts, and creative portfolios. Use cases: - Playful Portfolio Card Grids - Product Showcase Grids - Icon Feature Highlights - Team Member Photos - Call-to-Action Buttons --- ## Infinite Marquee URL: https://annnimate.com/animations/marquee Category: experimental Keywords: marquee, infinite, loop, draggable, horizontal, vertical, ui-component Infinite marquee with draggable autoplay and center snapping. Create smooth scrolling content with drag interaction and momentum. Draggable marquees snap to center element. Perfect for logos, testimonials, and repeating content. Use cases: - Partner Logo Showcases - Multi-Track Testimonial Ribbons - Vertical Social Feed Tickers - High-Energy Product Feature Banners - Interactive Award Galleries - Billboard-Style Text Animations --- ## Image Trail URL: https://annnimate.com/animations/image-trail Category: experimental Keywords: cursor, mouse, interactive, trail, images, follow, hover, smooth, desktop, microinteraction, experimental Images trail behind cursor as user moves mouse. Creates playful interactive effect with GSAP. Trailing images fade and shrink as they age. Automatically cleans up old trail elements. Desktop-only, perfect for creative portfolios and interactive showcases. Use cases: - Creative Portfolio Hero Sections - E-Commerce Product Showcases - Photography Gallery Interactions - Agency Brand Experiences - Event/Conference Landing Pages --- ## Custom Cursor URL: https://annnimate.com/animations/custom-cursor Category: experimental Keywords: cursor, custom-cursor, mouse, interactive, hover, text-label, smooth, follow, desktop, microinteraction, pointer, velocity, rotation Smooth custom cursor that follows mouse movement with GSAP smoothness. Features text labels that appear when hovering elements. Creates elegant interactive browsing experience. Desktop-only, auto-disabled on touch devices. Use cases: - Creative Portfolio Showcases - Photography Gallery Navigation - Agency Brand Experiences - Premium E-commerce Product Pages - Interactive Case Study Pages --- ## 3D Card Flip URL: https://annnimate.com/animations/3d-card-flip Category: experimental Keywords: 3d, card, tilt, perspective, hover, interactive, cursor-follow, transform, depth Interactive 3D card that tilts and rotates based on cursor position, creating realistic perspective illusion. Uses document-level mousemove to prevent edge hover issues. Features optional glare highlight and dynamic shadow effects. Perfect for product showcases and portfolio cards. Use cases: - E-Commerce Product Cards - Portfolio Project Previews - Team Member Profile Cards - Case Study Thumbnails - Feature/Benefit Cards --- ## Text Underline URL: https://annnimate.com/animations/text-underline Category: button Keywords: text, underline, hover, link, button, css-only, minimal, typography Underline slides in from left on hover and slides out to the right on exit. Creates a smooth directional effect that guides the eye. Perfect for text links, navigation items, or subtle button accents. Use cases: - Body Content Text Links - Navigation Menu Items - Minimal Text CTAs - Footer Link Columns - Portfolio Project Titles --- ## Rainbow Button URL: https://annnimate.com/animations/rainbow-button Category: button Keywords: button, rainbow, gradient, glow, continuous, animated, css-only, cta, colorful, premium, border Animated rainbow gradient flows across the button on hover. The gradient shifts smoothly through multiple colors, creating an eye-catching effect. Works best for playful brands, creative projects, or as a standout CTA. Use cases: - Premium SaaS Landing CTAs - Product Launch Announcements - Creative Portfolio Featured CTAs - Premium Pricing Tier Highlights --- ## Magnetic Button URL: https://annnimate.com/animations/magnetic-button Category: button Keywords: button, magnetic, hover, interactive, physics, spring, cursor-follow, cta Creates a subtle magnetic pull effect that follows the cursor. The button and its text track mouse movement with different intensity levels, creating depth. Works best for CTAs and primary actions where you want to draw attention. Use cases: - Hero Section CTAs - Portfolio Navigation - Premium E-commerce Actions - Agency Website CTAs --- ## Icon Button URL: https://annnimate.com/animations/icon-button Category: button Keywords: button, hover, icon, diagonal, slide, scale, pill, cta Icon rotates and morphs on hover while the button fills with color. The icon transforms smoothly using GSAP, creating a playful interactive feel. Perfect for action buttons where you want to signal state change visually. Use cases: - Call-to-Action Hero Buttons - Navigation and Directional Links - Portfolio Project Links - Product Showcase CTAs - Contact and Form Submit Buttons --- ## Curve Fill Button URL: https://annnimate.com/animations/curve-fill-button Category: button Keywords: button, hover, fill, direction-aware, svg, morph, organic, interactive, cta Direction-aware fill with organic curved wave that morphs from where your mouse enters. The button detects entry from top, bottom, left, or right and fills with a smooth SVG morph. Exit animations reverse the direction for natural feedback. Use cases: - Creative Portfolio Links - Agency Hero CTAs - Product Landing Page Buttons - Playful Navigation Menus --- ## Circle Fill Button URL: https://annnimate.com/animations/circle-fill-button Category: button Keywords: button, circle, hover, fill, cursor-follow, interactive, organic, cta Circular fill expands from your cursor position on hover. The scale adjusts dynamically based on where you enter, so the fill always takes the same duration whether you hover from center or edge. Creates an organic, cursor-following effect perfect for hero CTAs. Use cases: - Creative Portfolio CTAs - Premium Product Launch Pages - Playful Brand Experiences - High-End E-commerce --- ## Background Fill Button URL: https://annnimate.com/animations/background-fill-button Category: button Keywords: button, hover, fill, background, slide, interactive, cta Smooth background fill that slides up from the bottom on hover. The fill element transitions with an optional scale effect, adapting to any border radius. Text color changes automatically to maintain contrast and readability. Use cases: - E-commerce Product CTAs - Landing Page Hero CTAs - Navigation Menu Links - Form Submit Buttons ---