GSAP UI Elements

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.

Product-scale collaborator facepile: overlapping avatars that part on hover, one tooltip that travels between them, an overflow chip and a roster popover.

A three-step form where each completed answer compresses into a summary rail and the final submit button springs into a confirmation state.

Six-box one-time-code field over a single native input: each digit lands with a bounce, a ring slides to the next box, a paste fills every box in sequence and a wrong code shakes and clears.

Min and max range with two draggable thumbs that cannot cross, a stretching selected segment, and value bubbles that rise and count while you drag.

Five-star rating on native radios: hovering sweeps the fill up to the pointer with a stagger, clicking locks it with a spring pop, a sparkle and a cross-faded word.

Product tour that dims the page except a spotlight cutout, morphs the cutout from target to target, and floats a tooltip card with Back, Next and Skip.

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.

Sticky table of contents beside a long article, with a marker that slides to the section in view and a reading-progress line down the rail.

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 code it took.

A like button that springs its icon, throws a radial burst of pooled particles and rolls its count over one digit at a time.

Shimmering placeholder cards that crossfade into real content with a stagger, each card's height tweening from the placeholder shape to the content it loaded.

A data table with sortable header buttons, a rotating direction arrow and a subtle column highlight: rows re-order with GSAP Flip so each one visibly travels to its new place.

A scrollable row of multi-select filter chips over a results grid: each chip opens a tick, the row carries its own drawn scrollbar, the grid re-flows with GSAP Flip and the results count counts to its new number.

Site-wide search launched from a header button or the / key: the button morphs into a centred spotlight panel over a blurred backdrop, with grouped results and full keyboard control.

Numbered steps joined by a track whose fill tweens to the active step, with completed nodes flipping their number into a drawn checkmark.

A submit button that collapses into a spinner pill, then expands into a success state with a stroke-drawn checkmark.

Native checkbox toggle whose knob can be tapped or dragged, snaps to the nearer side, stretches while pressed and cross-fades the track colour.

Minus and plus stepper whose digits roll vertically like an odometer, with press squash, hold to repeat and a refusal shake at the limits.

Text input that turns Enter or comma into a chip: chips pop in with a spring, collapse their width on removal and shake when a duplicate is typed.

Search field over a grouped list: rows filter as you type with the matched characters marked, a highlight slides under the arrow keys, and Enter fills the field.

One floating bubble serves every target: position, width, height and arrow all tween, so the tooltip travels between targets instead of blinking out and back.

Right-click menu that springs out of the corner nearest the pointer, clamps itself inside the viewport and flies a submenu out sideways.

Right-hand slide-in panel with a dimmed backdrop, a fixed header, a scrollable body, and drag-to-close on the x axis.

Docs-style sidebar with collapsible sections that open on a measured height tween, rotating chevrons and a sliding indicator rail on the active link.

A hamburger button that morphs into an X while a full-screen overlay menu wipes in from the top and its links stagger up.

Segmented control whose indicator stretches in proportion to the distance it travels, with icons, disabled and busy option states, and a strip that scrolls when the options outgrow it.

Pricing scrubber with magnetic tier snapping, a value bubble that tracks the thumb, and a monthly/annual switch that re-tweens the price instead of jumping it.

Keyboard-first command palette: Cmd+K launcher, fuzzy filtering as you type, arrow-key selection and Enter to run.

A complete toast system: five types, an action button that resolves back to your code, a countdown that pauses on hover, swipe-to-dismiss and a promise helper that morphs one toast through its states.

A multi-detent bottom sheet: peek, half and full, snapped by release velocity, with scrollable content that hands the gesture back to the sheet only at the top of the list.

A dialog system built on one GSAP Flip morph: any trigger on the page becomes the dialog and back again, in three placements, with stacking, a validated form and the full overlay contract.

Tab bar whose pill is genuinely magnetic: it leans toward the cursor inside a link, stretches in proportion to how far it travels, and scrolls narrow bars to keep the active link in view.

Header navigation whose flyout container morphs between panel sizes with GSAP Flip instead of popping, with staggered card reveals.

macOS-style floating dock: cosine magnification on quickTo setters, a running-app dot that springs between icons, badge counts that pop, and drag-to-reorder with the neighbours opening a gap via Flip.