Hi all !
So i want to create a timeline of the <Item /> elements when i click the "on button", the problem is the animation plays all in one time, the stagger doesn't work.
I don't want to create a parent element that wrap the <Item /> elements and use "boxRef.current.children" because the idea is use in another part the <Item /> and have the same animation
import React, { useRef, useEffect, useState } from "react";
import gsap from "gsap";
const settings = [1, 2, 3, 4, 5, 6];
const Item = ({ item }) => {
const tl = gsap.timeline();
useEffect(() => {
tl.from([boxRef.current], 1, { y: 100, opacity: 0, stagger: 1, delay: 1 });
}, []);
const boxRef = useRef(null);
return (
<div
ref={boxRef}
style={{
width: "160px",
height: "160px",
background: "salmon",
borderRadius: "4px"
}}
>
{item}
</div>
);
};
export default function AnimatedBox() {
const [sw, setSw] = useState(false);
return (
<div>
<h4>turn on the sw</h4>
<button onClick={() => setSw(!sw)}>on</button>
{sw && (
<>
{settings.map((item) => {
return <Item key={item} item={item} />;
})}
</>
)}
</div>
);
}
