GSAP UI Elements

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 lime indicator springs between options with elastic easing; for billing toggles and settings.

Range slider whose price counts up and down through a numeric proxy tween as you scrub between tiers.

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

Toast notifications that stack, pop in with a spring, run a progress bar and slide out on their own timer.

Mobile-style bottom sheet that slides up, drags with the finger or pointer, and dismisses when pulled past a threshold.

Button-to-dialog transition: the trigger morphs into the modal with GSAP Flip, backed by a blurred overlay and spring easing.

Tab bar with a lime pill that slides to whichever link is hovered or active, easing in with an elastic spring.

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

macOS-style floating dock: icons magnify and lift as the pointer approaches, driven by a cosine falloff and GSAP quickTo setters.