GSAP UI elements

Over 50+

Docks, mega menus, modals, bottom sheets, toasts, command palettes, sliders and switches, each with at least three looks. Plain HTML, CSS and GSAP with no framework and no build step: £7 on its own, or all of them in the £99 Vault.

The Vault. Every item in the library, including the Vault exclusives, and everything added to it.

Browse UI elements

54 UI elements

    Questions about buying a component

    Will these fit a design that is not dark and neon?

    Yes. Every element ships in more than one look, each defined as a block of CSS custom properties in its own stylesheet and selected with a single data-variant attribute. The markup and the script are identical across them, so moving one onto your own palette is editing a block of tokens rather than working through the rules.

    What does one element depend on?

    Its own stylesheet and its own script, plus GSAP from a CDN. There is no component framework and no icon package: where an element uses icons they are inline SVG in the markup you copy. Some also load a GSAP plugin such as Flip or Draggable, which the product page lists. The demo pages pull a webfont from Google Fonts; swap it for your own.

    Can I try the interaction before buying?

    Yes. The demo on each product page is the component itself running in a frame, not a recording, so you can open it, tab into it, use the arrow keys and Escape, and check it at phone width. Interaction and keyboard behaviour are most of what a component like this is worth, and they are the part a screenshot cannot show.

    How is a UI element different from an effect?

    An element is a working piece of interface (a dock, a modal, a command palette) with its own states and keyboard behaviour. An effect is motion applied to markup you already have, such as a scroll reveal or a text animation. Buying one off this page is £7, an effect is £7, and The Vault covers both.

    More on the components themselves in the GSAP UI elements guide, and the rest of the buying and licensing detail on the FAQ.