# Annnimate > Production GSAP motion components for React and Vue. Every component shipped on a real brand site before it reached the library. By Good Fella. Annnimate is a paid GSAP motion component library built by Good Fella. Every component is built to the standard we ship for real brands. Some first shipped on those brand sites, the rest are Good Fella originals held to the same bar, and each component carries its honest origin on its detail page. React, Vue, and HTML/CSS/JS - same component, framework-idiomatic per format. ## Start here - [Home](https://annnimate.com/): Overview and live hero component - [Browse the library](https://annnimate.com/animations): All 97 components - [Pricing](https://annnimate.com/pricing): Library subscription + Landmark Kits (first Kit: Reveal) - [Platform](https://annnimate.com/platform): How the formats and stack fit together ## Documentation - [Installation](https://annnimate.com/docs/getting-started/installation) - [Quick start](https://annnimate.com/docs/getting-started/quick-start) - [Customization](https://annnimate.com/docs/guides/customization) - [Performance & accessibility](https://annnimate.com/docs/guides/production) - [Webflow](https://annnimate.com/docs/guides/webflow) ## Components (97) - [Process Rail](https://annnimate.com/animations/process-rail): 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 - [Scroll Mesh Bend](https://annnimate.com/animations/scroll-mesh-bend): 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 bi - [Pill Stepper](https://annnimate.com/animations/pill-stepper): 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 - [Feature Rail](https://annnimate.com/animations/feature-rail): 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 - [Logo Shuffle](https://annnimate.com/animations/logo-shuffle): 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 - [Split Flap Board](https://annnimate.com/animations/split-flap-board): 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 c - [Bento Focus](https://annnimate.com/animations/bento-focus): 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 - [Morphing Tooltip](https://annnimate.com/animations/morphing-tooltip): One dark tooltip that pulls up out of the toolbar button you hover, slides between neighbours while it resizes to each caption, and sinks ba - [Gooey Filter Chips](https://annnimate.com/animations/gooey-filter-chips): 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. Th - [Morphing Island](https://annnimate.com/animations/morphing-island): 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, pi - [Pricing](https://annnimate.com/animations/pricing): 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, w - [Scatter Cluster](https://annnimate.com/animations/scatter-cluster): 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, uncover - [Photo Stack Gallery](https://annnimate.com/animations/photo-stack-gallery): 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 - - [Dither Cursor Trail](https://annnimate.com/animations/dither-cursor-trail): A soft trail follows the pointer and breaks into chunky ordered-dither dots as it fades - wide and solid near the cursor, thinning into scat - [Spiral Gallery](https://annnimate.com/animations/spiral-gallery): An infinite vertical helix of image cards, climbing and orbiting a central axis like a winding staircase seen from inside it. Drag to spin, - [ASCII Overlay](https://annnimate.com/animations/ascii-overlay): Data-styled characters bloom over a real photo or video as you scroll, tinted to the colours underneath and only appearing in the brighter a - [Text On Path](https://annnimate.com/animations/text-on-path): 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 - [Lens Rail](https://annnimate.com/animations/lens-rail): A strip of photos you drag sideways. Whichever one passes the middle grows large, like sliding it under a magnifying glass, then shrinks aga - [Grid Chapters](https://annnimate.com/animations/grid-chapters): 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 - [Text Fill Wave](https://annnimate.com/animations/text-fill-wave): 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 b - [Feature Dialog](https://annnimate.com/animations/feature-dialog): 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 - [Network Globe](https://annnimate.com/animations/network-globe): 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 t - [Dock Footer](https://annnimate.com/animations/dock-footer): 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 co - [Multi-Step Form](https://annnimate.com/animations/multi-step-form): A three-step contact form that slides between steps with a direction-aware transition, floats its labels on focus, and morphs its send butto - [Image Glitch](https://annnimate.com/animations/image-glitch): 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 - [Curtain Slider](https://annnimate.com/animations/curtain-slider): A full-bleed image slider where each slide change plays a staggered curtain: the outgoing image is divided into twelve columns and each colu - [Morphing Tabs](https://annnimate.com/animations/morphing-tabs): 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 s - [Flip Filter](https://annnimate.com/animations/flip-filter): A filterable product grid where clicking a category flies every card smoothly to its new spot instead of jumping, and a toggle switches the - [Capsule Hero](https://annnimate.com/animations/capsule-hero): 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 - [Morphing Accordion](https://annnimate.com/animations/morphing-accordion): An FAQ accordion where each answer pours out of its question pill like liquid, briefly merging with it before settling into a clean rounded - [Scale Slider](https://annnimate.com/animations/scale-slider): 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 pa - [Morphing Select](https://annnimate.com/animations/morphing-select): A select field whose dropdown panel is born from the trigger with a liquid gooey separation, then rolls its value into place on selection. - [Morphing Pill Menu](https://annnimate.com/animations/morphing-pill-menu): A compact Menu pill that grows into the whole navigation panel when clicked - no overlay stacked on top, the pill itself morphs open. Links - [Expanding Strip](https://annnimate.com/animations/expanding-strip): 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. - [Index Wipe](https://annnimate.com/animations/index-wipe): 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 t - [Image Fly-In](https://annnimate.com/animations/image-fly-in): 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 - [Wipe Slider](https://annnimate.com/animations/wipe-slider): 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 - [Step Wipe](https://annnimate.com/animations/step-wipe): A tall scroll-driven section that wipes between product steps as you scroll, with the background and the centred card clipping open together - [Card Fan](https://annnimate.com/animations/card-fan): 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 indi - [Radial Gallery](https://annnimate.com/animations/radial-gallery): 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 c - [Detail Drawer](https://annnimate.com/animations/detail-drawer): The whole hero is the trigger. Click it and a detail panel slides in while the hero image pushes back, scales up and darkens behind it, then - [Gradient Footer](https://annnimate.com/animations/gradient-footer): 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. - [Testimonial Globe](https://annnimate.com/animations/testimonial-globe): A testimonial section built around a globe of images you can drag and spin, with frosted-glass quote cards floating over it. It drifts on it - [Dithering](https://annnimate.com/animations/dithering): Turns any image or video into two colours of little dots, with a lens that follows your cursor and fills the dots back in with the real colo - [Drift Gallery](https://annnimate.com/animations/drift-gallery): A row of product cards drifting sideways on their own that you can grab and throw, and they keep going before they settle. Grab a card and i - [Velocity Type](https://annnimate.com/animations/velocity-type): Text that reacts to how fast you scroll. It grows fatter, wider and more slanted as you speed up, leans into the direction you're scrolling, - [Gooey Hover Reveal](https://annnimate.com/animations/gooey-hover-reveal): Move your cursor across it and a liquid trail opens a hole in the cover to show what's behind. Stop moving and it closes back up. Works well - [Gooey Menu](https://annnimate.com/animations/gooey-menu): A floating action button that fans its actions out when you click it. They melt into one blob when they're closed and pull apart as they mov - [Typewriter](https://annnimate.com/animations/typewriter): Types out a list of phrases one letter at a time, pauses on each, then deletes it and moves to the next. Set the type speed, delete speed an - [Mega Menu](https://annnimate.com/animations/mega-menu): One dropdown that grows and shrinks to fit as you move between menu groups, opening from whichever side you came from. A short delay stops i - [Multi-Level Drawer Menu](https://annnimate.com/animations/multi-level-drawer-menu): A drawer menu with two panels. The first slides in, and if a category has sub-links, hovering it opens a second panel next to it. The page b - [Dual Scramble](https://annnimate.com/animations/dual-scramble): Text scrambles through a brand colour and then settles into its final colour. Fire it on scroll, hover, click or load. No layout shift, and - [Fullscreen Slide Menu](https://annnimate.com/animations/fullscreen-slide-menu): A fullscreen menu where the whole page slides, turns and shrinks away as a dark panel comes in over it, so it feels like turning a page. The - [Mesh Gradient](https://annnimate.com/animations/mesh-gradient): A full-screen animated mesh gradient with colour points that drift around slowly on their own, and your cursor stirs the colours like fluid - [Image Dissolve Scroll](https://annnimate.com/animations/image-dissolve-scroll): An image that breaks apart into random organic patches as you scroll, with a glowing edge along the line where it's dissolving. Travels up t - [Circular Slider](https://annnimate.com/animations/circular-slider): A row of cards sitting on a big circle that curve past as you drag, throw or use the arrows, then snap to the nearest one. Only the top slic - [Character Appear](https://annnimate.com/animations/character-appear): Letters fade in one at a time as you scroll, like a typewriter but with no movement, in order or scattered at random. Good for hero headline - [Multi Flip](https://annnimate.com/animations/multi-flip): A stack of cards that fans out from a messy pile into a neat grid as you scroll, each one starting overlapped at a random angle. Good for pr - [Tooltip](https://annnimate.com/animations/tooltip): Tooltips that follow your cursor or stick to an element, and flip themselves around when they'd run off the edge of the screen. Set the dela - [Text Morph](https://annnimate.com/animations/text-morph): Letters slide into new positions as you type, so the text feels alive as it changes. Fast typing skips the animation so it never lags. Good - [Morphing Dialog](https://annnimate.com/animations/morphing-dialog): A card that grows into a real dialog box, the shared bits sliding smoothly from the card into the open state and back when you close it. Bui - [Infinite Parallax Slider](https://annnimate.com/animations/infinite-parallax-slider): A horizontal slider that loops forever with layers moving at different speeds for depth. It plays on its own and pauses when you hover. Good - [Image Follow List](https://annnimate.com/animations/image-follow-list): Hover a list item and its image appears and follows your cursor, sliding smoothly as you move between rows. Good for portfolio lists and pro - [Hoverable List](https://annnimate.com/animations/hoverable-list): List rows that fill with a soft curved shape that bends based on whether your cursor came in from the top or the bottom. Good for navigation - [Accordion](https://annnimate.com/animations/accordion): A smooth accordion for FAQs and product details. Click a row and it opens with its height animating and the icon flipping, and the text can - [Velocity Clip](https://annnimate.com/animations/velocity-clip): Content clips and unclips depending on how fast you're scrolling, so quick scrolls cut more than slow ones. Good for fast-moving editorial l - [Text Split Zoom](https://annnimate.com/animations/text-split-zoom): An image grows from nothing to full size right between two halves of a headline, pushing the words apart as it opens. Runs on scroll or on e - [Text Scramble](https://annnimate.com/animations/text-scramble): Text runs through random characters before it lands on the real words, and you pick the character set, speed and trigger. Fire it on scroll, - [Text Reveal](https://annnimate.com/animations/text-reveal): Text comes in word by word or letter by letter as you scroll. Good for hero headlines that need some weight. - [SVG Draw Path](https://annnimate.com/animations/svg-draw-path): Draws an SVG line for you as you scroll, the stroke filling in from start to finish. Works with any path. Good for line art and decorative b - [Rectangle Text Reveal](https://annnimate.com/animations/rectangle-text-reveal): Lines of text appear one by one as a rounded rectangle wipes off each line and the words slide out from behind it. Good for paragraphs and q - [Progress](https://annnimate.com/animations/progress): A little indicator that shows how far you've scrolled through a page, as a ring with a percent, a bar, or a plain counter. Good for long rea - [Popping Text](https://annnimate.com/animations/popping-text): Letters pop into place one by one, scaling up from nothing with a little bounce and a random tilt. Good for bold statements. - [Parallax](https://annnimate.com/animations/parallax): Elements move at different speeds as you scroll so the page feels layered, slower in the back and faster up front. Good for hero sections yo - [Mask Reveal](https://annnimate.com/animations/mask-reveal): Content opens up or closes down through a shape as you scroll, a circle, oval, rectangle, blob or your own shape. Good for big, dramatic rev - [Infinite Draggable Grid](https://annnimate.com/animations/infinite-draggable-grid): A row of items you can drag through sideways, with momentum, that loops forever so you never hit the end. Good for image galleries and produ - [Hide Header](https://annnimate.com/animations/hide-header): A nav bar that hides when you scroll down and comes back when you scroll up, so the content gets the space. You can set how far you scroll b - [Folding Text](https://annnimate.com/animations/folding-text): Letters fold and unfold in 3D as you scroll, for a dramatic editorial reveal. You set the direction and timing. - [Flip Zone](https://annnimate.com/animations/flip-zone): A photo or video that moves and resizes from one spot to the next as you scroll, sliding smoothly into each new frame. Good for product stor - [Element Reveal](https://annnimate.com/animations/element-reveal): Six ways to bring elements in as you scroll: fade, slide up, scale, clip, blur or rotate. Add a stagger for that one-after-another feel. Goo - [Counter](https://annnimate.com/animations/counter): A number that counts up as you scroll to it, either rolling like an odometer with each digit spinning on its own, or ticking up smoothly. Ad - [Cinematic Text](https://annnimate.com/animations/cinematic-text): Big headlines slide in from the sides as you scroll, by line, word or letter. Gives you that editorial, movie-title feel for hero sections. - [Background Color](https://annnimate.com/animations/background-color): The section background and text colours shift smoothly as you scroll from one zone to the next, so the page changes mood without any hard br - [Animated Grid](https://annnimate.com/animations/animated-grid): A multi-column image grid where the columns move at different speeds as you scroll, with a few different motions to pick from. Needs smooth - [Text Shimmer Wave](https://annnimate.com/animations/text-shimmer-wave): A shimmer that runs across the letters of your text one after another, like light passing over it. Runs on scroll or on a loop. Good for hea - [Random Rotate](https://annnimate.com/animations/random-rotate): Each element drops in at its own random angle as you scroll to it, for a loose, hand-placed feel. Good for image grids and card layouts. - [Infinite Marquee](https://annnimate.com/animations/marquee): A row of content that scrolls on its own, sideways or up and down, and you can grab it to scrub through and let go to keep it going. Good fo - [Image Trail](https://annnimate.com/animations/image-trail): Images trail behind your cursor as you move, fading and shrinking as they fall away. Desktop only, good for creative portfolios. - [Custom Cursor](https://annnimate.com/animations/custom-cursor): A custom cursor that follows your mouse smoothly and can show a little label when you hover things. Desktop only, it turns itself off on tou - [3D Card Flip](https://annnimate.com/animations/3d-card-flip): A card that tilts and turns in 3D as you move your cursor over it, so it looks like it has real depth. It can catch a glare and drop a shado - [Text Underline](https://annnimate.com/animations/text-underline): An underline that slides in from the left when you hover and out to the right when you leave. Good for text links, nav items and small butto - [Rainbow Button](https://annnimate.com/animations/rainbow-button): A rainbow gradient that flows across the button on hover, shifting through the colours as it goes. Made for playful brands and creative proj - [Magnetic Button](https://annnimate.com/animations/magnetic-button): The button and its text gently pull toward your cursor and drift with it, so it feels like it's reaching for you. Best on the main calls to - [Icon Button](https://annnimate.com/animations/icon-button): The icon spins and changes as you hover while the button fills with colour. Good for action buttons where you want to show something's happe - [Curve Fill Button](https://annnimate.com/animations/curve-fill-button): The fill knows which side your mouse came from and rolls in with a curved wave from that direction, then rolls back out the way it came when - [Circle Fill Button](https://annnimate.com/animations/circle-fill-button): A circle of colour that grows out from wherever your cursor lands on the button, always taking the same time to fill whether you come in fro - [Background Fill Button](https://annnimate.com/animations/background-fill-button): A background colour that slides up from the bottom when you hover, and the text flips its own colour so it stays readable. Works with any bo ## Reference - [FAQ](https://annnimate.com/faq) - [Changelog](https://annnimate.com/changelog) - [Roadmap](https://annnimate.com/roadmap) - [What's new](https://annnimate.com/whats-new) - [Contact](https://annnimate.com/contact) ## Developer resources - [Developer and agent index](https://annnimate.com/developers): Every machine-readable surface in one page - [OpenAPI specification](https://annnimate.com/openapi.json): OpenAPI 3.1 contract for the public read API - [Components API](https://annnimate.com/api/v1/components): List and search the catalog as JSON - [Categories API](https://annnimate.com/api/v1/categories): Categories with live counts as JSON - [MCP server manifest](https://annnimate.com/.well-known/mcp.json): Transport, auth and tool list for the MCP server - [Agent guide](https://annnimate.com/agents.md): When to use Annnimate and how to wire it ## Agent access Annnimate ships an MCP server for Library subscribers: connect https://annnimate.com/api/mcp (Streamable HTTP, OAuth sign-in - works in Claude Code, Cursor, VS Code, Claude Desktop) and your coding agent can search components and pull paste-ready GSAP code directly. Setup guide: https://annnimate.com/docs/guides/mcp. Agent convention guide (when to use Annnimate + how to wire it): https://annnimate.com/agents.md. Free content is available to all agents as markdown page twins (append .md to any /learn, /patterns, /compare, /alternatives URL). ## About Annnimate is built by Julian Fella at Good Fella (Munich and Vienna). The studio ships brand websites for clients (BodyArmor, WKNDHRS, others). Each Annnimate component is extracted from a real production site, cleaned, documented, and shipped with React, Vue, and HTML/CSS/JS formats. The library is GSAP-native - not Framer Motion, not CSS tricks.