Layout

coreAdvancedRead the docs Open Playground

Code

const layoutRef = useRef<AnimeLayoutRef>(null);
const [grid, setGrid] = useState(1);

const nextGrid = () => {
  layoutRef.current?.update(() => {
    flushSync(() => {
      setGrid((prev) => (prev % 4) + 1);
    });
  });
}

<AnimeLayout
  ref={layoutRef}
  duration={600}
  ease="outExpo"
  wrapperProps={{ 'data-grid': grid }}
>
  {['A', 'B', 'C', 'D'].map((char) => (
    <AnimeLayoutItem key={char} layoutId={char}>
      Item {char}
    </AnimeLayoutItem>
  ))}
</AnimeLayout>

FLIP-based automatic and manual layout animations, supporting dynamic grid transitions, parent-child state propagation, and custom styling updates.

Live previewOpen Playground

Bento GridAdaptive Bento layout transitions

Item A

Item B

Item C

Item D

Props

Name	Type	Default	Description
ref	RefObject<AnimeLayoutRef>	-	Imperative control ref
duration	number	500	FLIP transition duration in ms
ease	string	outExpo	Transition easing curve
wrapperProps	HTMLAttributes	-	Forwarded container DOM attributes
ref.current.update	function	-	Callback to update state synchronously during layout record

Related components

✦

Basic Animation

Animate targets with CSS selectors, stagger, easing, and callbacks

Reorder List

FLIP-based shuffle, move, add/remove, and grid reorder animations

✦

Scope

Animation scopes with media queries, methods, and keepTime

On Scroll Scope

1	const layoutRef = useRef<AnimeLayoutRef>(null);
2	const [grid, setGrid] = useState(1);
3
4	const nextGrid = () => {
5	layoutRef.current?.update(() => {
6	flushSync(() => {
7	setGrid((prev) => (prev % 4) + 1);
8	});
9	});
10	}
11
12	<AnimeLayout
13	ref={layoutRef}
14	duration={600}
15	ease="outExpo"
16	wrapperProps={{ 'data-grid': grid }}
17	>
18	{['A', 'B', 'C', 'D'].map((char) => (
19	<AnimeLayoutItem key={char} layoutId={char}>
20	Item {char}
21	</AnimeLayoutItem>
22	))}
23	</AnimeLayout>