Layout Group
Jump-free reordering: filter, sort, regrid. Pro · 3D and motion › Motion for any component
Smooth layout changes for any list or grid: when it re-renders with items reordered, filtered, sorted or reflowed, every item slides from its old place to the new one on the theme's spring, and new items fade in. Works with keyed children of any kind — cards, table rows, chips — without ids or changes to them; only translate / scale move, on Web Animations. Reduced motion: items jump.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add layout-groupnpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { LayoutGroup } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
asChild | boolean | false | Animates the items of the only child (a grid, a list, a tbody) instead of wrapping it in a div. |
selector | string | The items that move, as a selector inside the container. Default: its element children. | |
spring | SpringName | The spring of the moves. Default: the theme's --ui-motion-spring. | |
resize | boolean | Also animate size changes with scale (text stretches for a moment); by default items slide and take their new size at once. | |
enter | boolean | Items that appear fade and grow in. | |
disabled | boolean | Off: items jump to their new places. |
Related components
- Reveal — Reveal any component on scroll: rise, fade in, 3D unfold
- Stagger — Lists, grids and table rows appear in a wave, one after another
- Tilt — Tilt, lift, glare and magnetic pull under the cursor for any card
- Presence — Enter and exit: an element stays mounted until its exit animation ends
- Scene Backdrop — WebGL or CSS scene behind a regular UI: hero, cards, dashboard
- Scroll Cylinder — Headline lines on a rotating cylinder, driven by scroll
- Stacking Panels — Panels stick on scroll and pile into a stack
- Helix Rail — Cards on a helix that spins with scroll
- Scroll Scene — Scroll scene: a pinned screen changes step by step, with a progress rail
- Parallax Layers — Depth layers that shift with scroll and cursor
- Orbit Showcase — 3D ring of cards: drag with momentum, arrows, keyboard
- Coverflow Carousel — 3D product carousel on native scroll: swipe with momentum, arrows, keyboard
Previous: Tilt · Next: Presence · All 3D and motion