This page lists all 35 animated UI components in the vault. A component here is not a page and not a decorative page effect: it is one working control, with its states, its keyboard handling and its motion already built, that you paste into an interface you already have. Two are completely free, with live demos you can drive below.
If you came looking for animation you drop onto a marketing page, that is the GSAP animation examples list. If you want a whole deployable site, that is the animated website templates list. This page is the component shelf: the docks, dialogs, palettes, tables and form controls an application is assembled from.
Here are the facts if you want the short version. There are 35 UI components. Two are free. Every one is plain HTML, CSS and JavaScript with no build step, no bundler and no framework, and every one loads GSAP from a CDN. Every look is driven by CSS custom properties, and each element ships three complete looks you switch with a single data-variant attribute, so a component can be made to match your product without touching its animation code. Individual components are £5, the one component kit is £15, and all of them are included in the Vault.
Components are grouped below by the job they do. Each group has its own page with the full grid, a customisation walkthrough and its own FAQ, linked from the section heading.
Table of contents
- What counts as an animated UI component?
- The two free components
- Navigation and menus
- Overlays and dialogs
- Search, filtering and tables
- Inputs and form controls
- Buttons, loaders and feedback
- Component kits
- How to choose one
- How to drop one into a project
- Pricing and licensing
What counts as an animated UI component?
An animated UI component is a control whose motion is part of how it works, not decoration layered on afterwards. A modal that scales up from nothing tells you nothing. A modal that grows out of the button you pressed tells you where you are and how to get back, which is the whole argument for animating interface at all.
That is the line every component here is built on. The bottom sheet snaps to a detent chosen by how fast you flicked it. The tooltip travels between targets rather than blinking out and back, so you can read three of them in a row without losing your place. The data table re-sorts by moving each row visibly to its new position instead of repainting in one invisible frame. In each case the animation is carrying information a static swap throws away.
The engineering underneath is ordinary GSAP, which is the point. Nothing here needs a component library, a state manager or a design system you have to adopt. Most run on GSAP core alone; the ones that morph between layouts use Flip, the ones you drag use Draggable, and the scroll-linked rail uses ScrollTrigger. All of those plugins are free.
The two free components
Two components are free, MIT licensed, and downloadable without an account. They are also mirrored in the free GitHub repo. They are built to exactly the same standard as the paid ones rather than cut down, so opening either folder tells you what the code is like everywhere else on this page.
iOS Toggle Switch
A settings toggle built on a real checkbox, so it submits, labels and focuses like one. The knob can be tapped or dragged, snaps to whichever side it is nearer when you let go, stretches while it is held down, and cross-fades the track colour rather than switching it. Uses Draggable. The right starting point if you want to see how a native input and a GSAP animation are made to agree with each other. View the iOS Toggle Switch.
Copy to Clipboard Button
A snippet block whose copy button morphs its clipboard icon into a stroke-drawn check, floats a “Copied” pill up beside it, and flashes the lines of code it just took so you can see what landed on your clipboard. No plugins at all, just core GSAP over SVG stroke and transforms. Drop it on documentation code blocks, install commands, API keys and share links. View the Copy to Clipboard Button.
Navigation and menus
Seven components for the part of the interface every visitor touches, and the part that most quickly gives away a product assembled from defaults. Browse them as a grid on the navigation components page.
Floating Dock Navigation
A macOS-style floating dock. Icons magnify on a cosine falloff driven by quickTo setters, so no tween is allocated per mouse move, a running-app dot springs between icons as the active item changes, and badge counts pop when the number changes. Icons drag to reorder with the neighbours opening a gap through Flip. Suits dashboard quick actions, app shells where people pin their own tools, and any site that wants Apple-tier polish in the chrome. View the Floating Dock Navigation.
FLIP Morphing Mega Menu
Header navigation whose flyout container morphs between panel sizes with GSAP Flip instead of popping from one shape to the next, with the cards inside staggering in behind it. It is the difference between a menu that feels like one surface and a menu that feels like three separate boxes sharing a hover state. For marketing sites with multi-column navigation, apps with grouped feature menus, and docs sites with sectioned resource menus. View the FLIP Morphing Mega Menu.
Magnetic Pill Navigation
A tab bar whose pill is genuinely magnetic: it leans toward the cursor while you are inside a link, stretches in proportion to how far it has to travel, and scrolls a narrow bar to keep the active link in view. No plugins. A setActive method keeps it in sync with a router, so it works as real single-page-app navigation rather than only as a demo. Good for docs and product sub-navigation, dashboard section switchers, and pricing tabs. View the Magnetic Pill Navigation.
Hamburger Fullscreen Menu
A hamburger button that morphs into an X while a full-screen overlay wipes in from the top on a clip path and its links stagger up behind it. It is a real focus-trapped menu rather than a CSS dropdown pretending to be one, which is what separates a studio header from a template header. Built for agency and portfolio sites with four to six top-level destinations, and for mobile navigation on marketing pages. View the Hamburger Fullscreen Menu.
Accordion Sidebar Nav
A documentation-style sidebar with collapsible sections that open on a measured height tween rather than a guessed one, rotating chevrons, and an indicator rail that slides to the active link. Takes a nav long enough to be unusable and folds it down to something scannable. For knowledge bases, admin navigation with grouped destinations, and settings screens. View the Accordion Sidebar Nav.
Scrollspy Table of Contents Rail
A sticky table of contents beside a long article, with a marker that slides to the section currently in view and a reading-progress line running down the rail. Clicking a heading scrolls smoothly to it. Uses ScrollTrigger and ScrollToPlugin. The correct component for API references, long-form editorial, legal pages, changelogs and numbered onboarding guides. View the Scrollspy Table of Contents Rail.
Bottom Tab Bar
A mobile app tab bar with an indicator that slides and stretches between tabs, an icon that springs up on selection, and a notification badge that pops. No plugins. Built for installable web apps, phone-width app shells and mobile dashboards, and useful in prototypes and design reviews where you want a real tab bar rather than a picture of one. View the Bottom Tab Bar.
Overlays and dialogs
Seven components for everything that arrives on top of the page. This is the family where motion earns the most, because an overlay has to explain where it came from and where it will go back to. Browse them on the overlay and dialog components page.
Fluid FLIP Modal
A whole dialog system built on one GSAP Flip morph: any trigger on the page becomes the dialog and then becomes the trigger again on close. It ships three placements, dialog stacking so a confirm can sit over a form, a validated form inside, and the full overlay contract of focus trapping, scroll locking and backdrop dismissal. The side placement becomes a bottom sheet on a phone. For invite and settings dialogs launched from a row’s own button, and for destructive actions that need a confirm on top. View the Fluid FLIP Modal.
Draggable Bottom Sheet
A multi-detent bottom sheet with peek, half and full positions, snapped by release velocity rather than by where your finger stopped. The hard part is solved: content inside the sheet scrolls normally, and only hands the gesture back to the sheet when the list is already at the top. Uses Draggable. For mobile filter and sort panels, map and search results that need a peek state, action sheets, and cart summaries. View the Draggable Bottom Sheet.
Stacked Notification Toasts
A complete toast system rather than a single animated notice: five types, an action button that resolves back to your own code so Undo actually undoes, a countdown that pauses while the pointer is over it, swipe-to-dismiss, and a promise helper that morphs one toast through loading, success and failure. No plugins. For save and deploy flows, destructive actions with an undo window, and live feeds where several notices land at once. View the Stacked Notification Toasts.
Side Drawer Panel
A right-hand slide-in panel with a dimmed backdrop, a fixed header that stays put while the body scrolls, and drag-to-close on the x axis so it can be dismissed with a thumb. Uses Draggable. The workhorse of app shells: settings panels, cart and checkout drawers, listing filters, and detail inspectors opened from a table row. View the Side Drawer Panel.
Spring Context Menu
A right-click menu that springs out of the corner nearest the pointer, clamps itself inside the viewport so it never opens off-screen, and flies a submenu out sideways. Items stagger in, and it opens on long press on touch. No plugins. For file and asset managers, canvas and editor tools that replace the browser menu, and data tables with per-row operations. View the Spring Context Menu.
Morphing Popover Tooltip
One floating bubble serves every target on the page. Position, width, height and the arrow all tween, so the tooltip travels from one target to the next instead of blinking out and back in. Read three tooltips in a row and it feels like a single object following your attention. For dense settings and billing panels, icon toolbars with no room for labels, and pricing pages explaining inline terms. View the Morphing Popover Tooltip.
Onboarding Tour Spotlight
A product tour that dims the whole page except a spotlight cutout, then morphs that cutout from target to target while a tooltip card with Back, Next and Skip follows it. Because the cutout moves rather than redraws, the tour reads as one continuous explanation instead of a slideshow. For first-run onboarding in a dashboard, feature announcements pointing at the control that changed, and in-app help. View the Onboarding Tour Spotlight.
Search, filtering and tables
Five components for finding things and re-ordering them. Every one of them animates a change in a list, which is exactly where an interface most often loses the user. Browse them on the search and command components page.
Cmd+K Command Palette
A keyboard-first command palette: Cmd+K opens it, results fuzzy-filter as you type, arrow keys move the selection, Enter runs it. No plugins. It is the component that turns a dashboard full of buried settings into something a power user can operate without the mouse, and it takes an afternoon to wire to your own action list. For admin portals, developer tools and documentation sites. View the Cmd+K Command Palette.
Autocomplete Search Dropdown
A search field over a grouped list: rows filter as you type with the matched characters marked inside each result, a highlight slides under the arrow keys, and Enter fills the field. No plugins. Use it anywhere a plain datalist looks unfinished: docs search split by section, admin pickers for customers or tickets, and location, currency or tag fields that need grouping. View the Autocomplete Search Dropdown.
Spotlight Global Search
Site-wide search launched from a header button or the / key. The button itself morphs into a centred spotlight panel over a blurred backdrop, so the search field visibly comes from the thing you pressed, with grouped results and full keyboard control. For dashboards and SaaS apps, docs sites that need one field across pages and reference, and any header search box that currently throws you to a separate results page. View the Spotlight Global Search.
Filter Chip Bar
A scrollable row of multi-select filter chips over a results grid. Each chip opens a tick when selected, the row carries its own drawn scrollbar and drags horizontally, the grid re-flows with GSAP Flip so surviving cards travel to their new positions, and the results count counts up to its new number instead of jumping. For portfolio grids filtered by discipline, product listings, job boards with several tag axes, and blog indexes. View the Filter Chip Bar.
Sortable Data Table
A data table with sortable header buttons, a rotating direction arrow and a subtle highlight on the sorted column. Rows re-order with GSAP Flip, so each one visibly travels to its new place and you can follow the row you were reading. For admin tables of accounts and orders, comparison tables readers want to re-rank, and reporting views where the column sort is the main interaction. View the Sortable Data Table.
Inputs and form controls
Nine components for the fields people actually have to fill in, including the free iOS Toggle Switch above. Forms are where abandonment happens, and where a control that acknowledges input is worth more than any hero animation. Browse them on the input and control components page.
Count-Up Pricing Slider
A pricing scrubber with magnetic tier snapping, a value bubble that tracks the thumb, and a monthly/annual switch that re-tweens the price rather than jumping it. Watching the number travel is what makes the saving legible. No plugins. For SaaS pricing pages with seat or usage sliders, quote calculators, and upgrade flows where the plan is chosen before payment. View the Count-Up Pricing Slider.
Elastic Segmented Switch
A segmented control whose indicator stretches in proportion to the distance it travels, so a two-step move reads differently from a one-step move. It carries icons, disabled and busy option states for options that load asynchronously, and a strip that scrolls when the options outgrow their container. No plugins. For billing toggles, dashboard view switchers, and timeframe pickers with more ranges than fit on a phone. View the Elastic Segmented Switch.
Tag Input Chips
A text input that turns Enter or a comma into a chip. Chips pop in with a spring, collapse their own width on removal so the row closes up rather than snapping, and shake when you type one that is already there. No plugins. For skill and topic pickers on profiles, filter and label builders in dashboards, recipient fields on invite dialogs, and keyword entry on publishing screens. View the Tag Input Chips.
Quantity Stepper Roll
A minus and plus stepper whose digits roll vertically like an odometer, with a squash on press, hold-to-repeat for larger jumps, and a refusal shake at the limits so a disabled button is never silent. No plugins. For cart and checkout quantities, seat and guest pickers on booking forms, and any numeric setting where the change should be legible rather than instant. View the Quantity Stepper Roll.
Star Rating Input
A five-star rating built on native radio inputs. Hovering sweeps the fill up to the pointer with a stagger, clicking locks it in with a spring pop, a sparkle, and a cross-faded word describing the score. No plugins. For product and order reviews, post-support satisfaction prompts, course and recipe feedback, and any rating field that should feel worth filling in. View the Star Rating Input.
Dual Range Slider
A min and max range with two draggable thumbs that cannot cross, a selected segment that stretches between them, and value bubbles that rise and count while you drag. Uses Draggable. For price and budget filters on marketplaces, date and distance windows on search interfaces, and any pair of values where the gap between them is the answer. View the Dual Range Slider.
OTP Code Input
A six-box one-time-code field built over a single native input, which is what makes autofill and mobile keyboards behave. Each digit lands with a bounce, a ring slides to the next box, a pasted code fills every box in sequence, and a wrong code shakes and clears itself. No plugins. For two-factor login, email and SMS confirmation steps, and payment confirmation prompts. View the OTP Code Input.
Spring Step Form
A three-step form where each completed answer compresses into a summary rail down the side, so the page never feels longer than one question, and the final submit button springs into a confirmation state. No plugins. For onboarding flows that need a little context, lead capture that keeps the conversation focused, and project intake forms that should end with something reassuring. View the Spring Step Form.
Buttons, loaders and feedback
Six components for the moments between an action and its result, including the free Copy to Clipboard Button above. These are the smallest components on the page and the ones users notice most, because they are the only reply the interface gives. Browse them on the button and feedback components page.
Morphing Submit Button
A submit button that collapses into a spinner pill and then expands into a success state with a stroke-drawn checkmark, so the wait happens inside the control you pressed rather than beside it. No plugins. For sign-up and checkout forms, save and publish buttons in dashboards, and newsletter captures where the response currently arrives as a spinner floating next to the button. View the Morphing Submit Button.
Step Progress Indicator
Numbered steps joined by a track whose fill tweens to the active step, with completed nodes flipping their number into a drawn checkmark. No plugins. For multi-step checkout, onboarding wizards, long applications split into sections, and upload and publish pipelines where people need to know how much is left. View the Step Progress Indicator.
Skeleton to Content Reveal
Shimmering placeholder cards that crossfade into real content with a stagger, each card’s height tweening from the placeholder shape to whatever it actually loaded. That height tween is the detail most skeleton implementations skip, and it is the one that stops the page jolting. No plugins. For feeds and dashboard lists waiting on an API, product grids fetched after first paint, and infinite scroll. View the Skeleton to Content Reveal.
Reaction Burst Button
A like button that springs its icon, throws a radial burst of pooled particles, and rolls its count over one digit at a time. The particles are pooled rather than created per click, so holding it down does not allocate. No plugins. For post and comment reactions, article claps and saves, upvotes in internal tools, and any counter currently incrementing with no acknowledgement at all. View the Reaction Burst Button.
Presence Avatar Cluster
A product-scale collaborator facepile: overlapping avatars that part on hover so you can pick one out, a single tooltip that travels between them, an overflow chip, and a roster popover for the full list. For app bars on documents and boards with live collaborators, project rows showing assignees, and consoles where who is here matters more than who is listed. View the Presence Avatar Cluster.
Component kits
One kit so far, for when you need a whole surface rather than a single control. A kit is a set of components sharing one token file, which is the only way charts, tables and overlays end up agreeing about surface, ink, radius, spacing and motion. Browse it on the component kits page.
Ops Console UI Kit
Thirteen dashboard components on one design system: charts, a sortable table, a command bar, overlays and a live feed, in light and dark from a single token file. Deliberately overlapping with elements you can buy singly, because the point of a kit is that everything already agrees rather than that everything is new. Uses Flip. For internal dashboards and admin consoles that need to look designed rather than assembled, incident and on-call tooling, and SaaS analytics surfaces where charts and tables sit side by side. A kit is £15, three singles in price and thirteen components in content. View the Ops Console UI Kit.
How to choose one
Pick by the problem in your interface, not by the component name. Almost every component here re-points to a different context with a copy pass and a palette swap, because the interaction is the product and the styling is a variable.
Three practical rules:
- If the user is losing their place, animate the connection. The Fluid FLIP Modal, the Spotlight Global Search and the Onboarding Tour Spotlight all grow out of the thing you pressed and go back to it.
- If a list is changing under them, move the items. The Filter Chip Bar and the Sortable Data Table both use Flip so rows and cards travel rather than teleport.
- If they are waiting, put the wait inside the control. The Morphing Submit Button, the Step Progress Indicator and the Skeleton to Content Reveal each answer in the place the user is already looking.
If you are still deciding, start with a free one. The two above are built to the same standard as the paid ones, so opening the folder tells you exactly what the code is like everywhere else.
How to drop one into a project
Every component is static files. There is no compilation, no npm install, no framework to learn. The workflow is:
- Copy the component block out of
index.html. Each demo marks it with comments, and the README lists what is demo furniture rather than part of the component. - Link the stylesheet and the script, and load GSAP from a CDN alongside whichever plugin that component names.
- Pick a look with the
data-variantattribute, or override the custom properties at the top of the stylesheet with your own tokens.
Because there is no build step, a component drops into a static site, a WordPress theme, a Rails or Laravel view, or a React app without changing anything but where you paste the markup. The scripts guard their own initialisation, so nothing runs before the DOM is ready and nothing breaks when a deferred script loads late.
Each component’s README documents its markup contract, its options, and its keyboard behaviour, so integrating one is reading a page rather than reverse-engineering a demo.
Pricing and licensing
Here are the facts, stated plainly for anyone comparing options:
- Each UI component is £5. So is an individual effect; a full website template is £10, because it is a complete deployable site rather than one control, and the component kit is £15, because it is a whole set on one design system.
- Two components are free, MIT licensed, with no account required.
- The standard license covers unlimited personal and commercial projects. The only restrictions are no redistribution and no competing products.
- Every component is included in the Vault. The Vault covers every current effect, template and UI element, and every future release in those three lines, for a single payment.
Between one component and the whole Vault sits the UI Elements Pass, a one-time payment covering every current and future component in this line. Either way it is a payment rather than a subscription, and future releases arrive in your library at no extra cost.
Try one first, without losing money on it
No amount of screenshots answers the only question that matters: is this code good to work with once it is open in your editor? That question is worth £5 to answer, and answering it should not commit you to anything.
So buy a single component, wire it into something real, and see how it goes. If you decide you want the rest, up to £10 of what you already spent comes off the Vault price at checkout. Starting small never costs you more than starting big.
The mechanics are deliberately boring: it is a discount on the upgrade rather than a refund, so nothing is paid back to you. It applies automatically with no code to enter, and the only requirement is that you are logged in when you buy the Vault. Guest checkouts count too, because an account is created against your email at the time of purchase.
Where to start
- Browse all 35 UI components side by side, filtered by family or tier.
- Download the two free components and read the code before spending anything.
- Explore the effects library for the page-level animation these sit alongside.
- Read the pricing page for how the Vault, the passes and the upgrade credit work.
