When the page is reloaded, the animation is not performed. What is the problem?
const array = [
{
title: "Ref Element 1"
},
{
title: "Ref Element 2"
},
{
title: "Ref Element 3"
}
];
export function Slider() {
const titleH1Refs = useRef([]);
titleH1Refs.current = [];
//checking for an existing element in an array
const addToRefsTitleH1 = el => {
if (el && !titleH1Refs.current.includes(el)) {
titleH1Refs.current.push(el);
}
};
//perform animation for all array elements
useLayoutEffect(() => {
titleH1Refs.current.forEach((element) => {
gsap.from(element, {
opacity: 0,
y: 20,
ease: Expo.easeInOut
})
})
}, [titleH1Refs.current]);
return (
<section className="container">
{array.map((element) => (
<div className="element" ref={addToRefs}>{element.title}</div>
))}
</section>
);
}
