FlipList

Animated layout shifts powered by GSAP's Flip plugin. Pass a flipKey that changes whenever the list reorders, and the wrapper will capture the previous DOM state and animate to the new one.

Usage

import { FlipList } from '@bwo-ui/react';
import { useState } from 'react';

const [items, setItems] = useState([1, 2, 3, 4]);
const shuffle = () =>
  setItems((xs) => [...xs].sort(() => Math.random() - 0.5));

<button onClick={shuffle}>Shuffle</button>

<FlipList flipKey={items.join(',')} duration={0.6}>
  {items.map((n) => (
    <div key={n}>{n}</div>
  ))}
</FlipList>

Props

Prop	Type	Default	Description
`flipKey`	`string \| number`	—	Changes whenever the list mutates. The wrapper captures before the next render and commits the Flip animation after.
`itemSelector`	`string`	`':scope > *'`	Selector for items inside the container.
`duration`	`number`	`0.5`	Tween duration.
`ease`	`string`	`'power2.inOut'`	GSAP ease.
`stagger`	`number`	`0.03`	Stagger between items.
`absolute`	`boolean`	`false`	Use position: absolute during the flip — useful for grids that resize.

Imperative handle

FlipList also exposes a ref handle with flip(mutate), capture(), and commit() for cases where flipKey isn't enough.