import { useAnimate } from "motion/react";
import { useEffect } from "react";

export const App = () => {
  return (
    <div className="wrapper">
      <Component>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
        <li>hello</li>
      </Component>
    </div>
  );
}

const Component = ({children}) => {
  const [scope, animate] = useAnimate();

  useEffect(() => {
    animate("li", { opacity: 0.5 })
  })
  
  return <ul ref={scope}>{children}</ul>
}