Thank you! I went ahead and applied those changes but my events still seem to be firing twice. I moved the component to stackblitz so you could take a look.
https://stackblitzstarterskgd3hx-gyvp--3000--9e2d28a3.local-credentialless.webcontainer.io
UPDATE:
Figured it out. The solution, for my anyway, was to:
1. attach the event listener directly on the element
2. create and leverage a ref array to grab the correct instance via index.
const itemRefs = useRef([]);
const timelineRef = useRef(gsap.timeline({ paused: true }));
const activeItem = useRef(null);
itemRefs.current = [];
const addToItemRefs = (el) => {
if (el && !itemRefs.current.includes(el)) {
itemRefs.current.push(el);
}
};
const toggleClick = (clickedItem) => {
if (activeItem.current === clickedItem) {
timelineRef.current.reverse();
return;
}
// timeline code...
<div className="skew-container grid grid-cols-4 gap-5 p-5 items-center h-full w-full">
{items.map((image, index) => (
<div
ref={addToItemRefs}
key={index}
onClick={() => toggleClick(itemRefs.current[index])}
className="skew-item bg-slate-500 min-h-[300px] h-full border-2 border-gray-900 rounded-lg overflow-hidden bg-cover bg-no-repeat"
>
<h2>{image.title}</h2>
</div>
))}
</div>
