35 animated interface components, docks, menus, modals, sheets, palettes, sliders and buttons, each with a live demo and the full source. 2 are free to download. This page covers what a GSAP UI element actually is, how it differs from a component library or a Figma kit, and how to wire one into your page.
£50
Every current and future premium UI element. 33 today, and every one we add to this line.
£99
All three lines: 65 effects, 54 templates and 33 UI elements. 152 today, plus everything we release next.
A hand-picked 12 from the 35 in the catalogue, spanning navigation, overlays, search, controls, feedback and a full kit. 2 of the full set are free and MIT-licensed.
A GSAP UI element is a single interface component, a navigation dock, a command palette, a bottom sheet, a submit button, whose interaction is animated with the GreenSock Animation Platform and shipped as plain HTML, CSS and JavaScript. The motion is not decoration on top of the component; it is the component's behaviour: the dock magnifies under the cursor, the palette's highlight slides between results, the sheet tracks your finger and settles to a detent. You paste the markup, include the script, and the choreography that normally takes days to tune is already tuned.
What separates these from a snippet found on CodePen is the unglamorous half of the work. The controls wrap real form inputs, so values submit and validate like the native elements they replace. Keyboard behaviour is routed deliberately, because shared flyout panels and overlay dialogs are precisely where natural Tab order breaks. Every element has a reduced-motion path that keeps all of its states working with the tweening removed, and a teardown path so it mounts and unmounts cleanly inside single-page apps. Each ships in several visual variants selected by one attribute, with every colour, radius and shadow exposed as a CSS custom property.
"UI component" covers four quite different things, and the difference decides what you install, what you edit and what stack you are tied to. Everything in this catalogue is the first row: finished, animated components as static files with no framework underneath.
| Format | You edit | What it is | Best for |
|---|---|---|---|
| GSAP UI element | Tokens and content | A finished, animated component as plain HTML, CSS and JavaScript: markup you paste, a stylesheet of custom properties, and a script with the motion already choreographed. No framework, no build step. | Adding one finished interaction (a dock, a palette, a sheet) to any stack, including WordPress, Rails, or a framework app, without adopting a component system. |
| Framework component library | Props and theme config | A package (MUI, Radix, shadcn/ui) of React or Vue components installed from npm and composed in JSX, with behaviour supplied through props and state. | An application already committed to that framework, where dozens of consistent controls matter more than any one of them being distinctive. |
| CSS framework widget | Classes in your markup | Markup patterns styled by a utility or class framework (Bootstrap, Tailwind snippets), usually with little or no motion and behaviour left to you. | Fast structural scaffolding where the visual layer is disposable and animation is not the point. |
| Figma UI kit | Vectors, then rebuild in code | Design artboards of components with no code at all. What ships is a picture of an interface, to be implemented separately. | Design exploration and handoff, when the implementation stack is undecided or someone else's problem. |
Components are grouped by the job they do in an interface, because that is how the need arrives. Each family page goes deeper on one kind of component and compares every element in it.
macOS-style floating docks, morphing mega menus with FLIP transitions, and staggered full-screen overlay headers.
Expanding button-to-modal dialogs via GSAP Flip, drag-to-dismiss bottom sheet drawers, and stacked notification queues.
Cmd+K quick search command bars with fuzzy filtering and keyboard navigation.
Scrubbed pricing sliders with count-up numbers and elastic segmented switches for billing toggles and settings.
Submit buttons that morph through loading and success, step progress indicators, and the small state changes that make an app feel finished.
Every element is static files with no build step, so integration is a paste, then a token pass. The order below is the one that avoids rework.
Each download ships a stylesheet, the GSAP CDN tag it was built against, and its own script, in that order. The script finds its elements by id on load, so there is nothing to initialise by hand.
The trigger goes where the user acts; overlay markup sits at the end of body so nothing clips it; a control goes inside your form, wrapping a real input that submits like the native element. Keep the ids, or update the selectors at the top of the script.
Rows, labels, values and ranges are plain markup and attributes, read at init. Components with runtime states, a submit button, a toast queue, expose them as plain functions you call from your own handlers.
Each element ships several looks selected by one data-variant attribute, with every colour, radius and shadow as a custom property in that variant block. Restyling to your brand is one block of CSS, never a hunt through selectors.
<body data-variant="glass">
<!-- every token the component uses,
in one block per variant -->
body[data-variant="glass"] {
--surface: rgba(18, 18, 22, 0.72);
--ink: #f4f1ea;
--accent: #c8ff00;
--radius: 14px;
--backdrop: rgba(8, 8, 12, 0.5);
}An animated control that abandons the native element it replaces also abandons form submission, validation, autofill and assistive technology in one move. The controls here wrap actual inputs, checkboxes, radios and range elements holding the value, so the animation layer sits on top of the platform instead of instead of it.
A submit button is idle, loading, succeeded or failed; a sheet is open at a detent or dismissed. Those states exist and transition correctly even under prefers-reduced-motion, when the tweens collapse to instant changes. A component whose states only exist as animation frames has no reduced-motion answer and no answer for an interrupted transition either.
Menus that share one flyout panel and dialogs that overlay the page are exactly where natural Tab order silently fails. Opening an overlay moves focus into it, Escape and backdrop close it, closing returns focus to the trigger, and menu entries are reachable by arrow keys as well as pointer. This is manual work, which is why snippets skip it.
Every close animation runs to completion and then hides the element, so an invisible overlay never sits on top of the page intercepting clicks. Listeners are torn down on unmount, which is what makes an element safe inside a framework that mounts and unmounts views, and safe to use twice on one page.
A single interface component, such as a dock, mega menu, modal, bottom sheet, command palette, slider or animated button, whose interaction is built with the GreenSock Animation Platform and shipped as plain HTML, CSS and JavaScript. The motion, keyboard behaviour and state handling are already written, so adding it to a page is pasting markup and including two scripts.
Yes. Some elements are free and MIT-licensed, with the full source available without an account, so you can see exactly how the paid ones are engineered before buying anything. The free ones are complete components, not cut-down previews.
Yes. Each element is vanilla JavaScript with an init that runs on load and a clean teardown, so it mounts inside a framework lifecycle hook and unmounts without leaking listeners. Nothing assumes a bundler or a component system, which is also what makes the same files work in WordPress or plain HTML.
Yes. Every control wraps a native input that holds the value, so standard form submission, validation and server-side reading work unchanged, and keyboard and assistive technology reach the same element the pointer does. The animation layer decorates the platform control rather than replacing it.
No. Since the GSAP 3.13 release in April 2025 the full plugin set is free, including for commercial work under the GSAP Standard License. Elements that use Flip, Draggable or InertiaPlugin carry no additional licence cost.
Yes. The standard licence covers unlimited personal and commercial projects, including client work, with no per-project fee. The only restrictions are that you cannot redistribute the components themselves or build a competing component library from them.
Not inherently. These animate transforms and opacity, which the compositor handles without recalculating layout, and GSAP drives everything from a single requestAnimationFrame tick. Interface jank almost always comes from animating layout properties or leaking triggers across view changes, which is exactly what the teardown paths here prevent.
An element is one component, designed to drop into your existing design. A kit is a whole set built on one token file, charts, tables, overlays and controls that already agree about surface, ink, radius, spacing and motion, for when the job is an entire screen rather than a single interaction. Kits sit in the same catalogue and are covered by the same licence, section pass and Vault.
The UI elements library holds all 35 of them at £5 each (£15 for a kit), or take every effect, template and UI element in The Vault for £99.
Your cart is empty
The Vault £99
Every effect, template and UI element: 152 today, plus everything we release next.
Or browse effects, templates or UI elements.