Staggered List Animation

import { useEffect, useRef } from 'react'
import gsap from 'gsap'

export function StaggeredList({ items }) {
  const listRef = useRef(null)

  useEffect(() => {
    const items = listRef.current.children

    gsap.fromTo(
      items,
      { opacity: 0, x: -30 },
      {
        opacity: 1,
        x: 0,
        duration: 0.6,
        stagger: 0.1,
        ease: 'power2.out',
      }
    )
  }, [])

  return (
    <ul ref={listRef}>
      {items.map((item, i) => (
        <li key={i}>{item}</li>
      ))}
    </ul>
  )
}