Staggered List Animations

1import { useStagger } from '@flint-ui/core'
2
3function AnimatedList({ items }: { items: string[] }) {
4  const { getStyle, mounted } = useStagger(items, {
5    from: { opacity: 0, transform: 'translateX(-12px)' },
6    enter: { opacity: 1, transform: 'translateX(0px)' },
7    staggerDelay: 50,  // ms between each item
8    duration: 200,
9  })
10
11  return (
12    <ul>
13      {items.map((item, i) => (
14        <li key={item} style={getStyle(i)}>
15          {item}
16        </li>
17      ))}
18    </ul>
19  )
20}
21
22// Usage
23function SearchResults({ results }: { results: Result[] }) {
24  return (
25    <AnimatedList
26      items={results.map((r) => r.id)}
27    />
28  )
29}