Hi everyone,
I'm experiencing an issue with my animation. I've searched through existing topics, but couldn't find a solution that matches my problem. To provide some context, I've created a dynamic page for displaying project details. It consists of a description section on the left and an image section on the right. The description is scrollable, and the image changes based on the current description.
The issue like i start from project/1 i show all there descriptions all good but when i go to the project/2 or project/^n the scroll still in the register or some where that affect to my animation (the scroll affect to the first image because the scroll still ) ,However, everything works fine if I refresh the page like what i want ,
So, I'm looking for a solution to reset the ScrollTrigger and resizing functionality dynamically. (methods or props in the useGSAP)
Thanks for your help, and I apologize for the lengthy explanation. I just wanted to ensure the context is clear.
gsap.registerPlugin(ScrollTrigger);
const workInfoItemsRef = useRef();
let imageRefs = useRef([]);
const ParrentRef = useRef();
useGSAP(
() => {
// initialise the imageRefs
if (
workInfoItemsRef.current &&
imageRefs.current.length > 0 &&
NumberOfFeature > 1
) {
// N2aficti ZIndex directly lrefs:
imageRefs.current.forEach((item, index) => {
item.style.zIndex = imageRefs.current.length - index;
});
// nInitialiser clip-path b refs:
gsap.set(imageRefs.current, {
clipPath: function () {
return "inset(0px)";
},
});
// nCriyi l'animation :
const animation = gsap.to(
imageRefs.current, // fiha ta last child ! rd lball
{
clipPath: function (i) {
return i != imageRefs.current.length - 1
? "inset(0px 0px 100% 0px)"
: "inset(0px)";
},
stagger: 2,
ease: "none",
}
);
// nCriyi ScrollTrigger l Parrent ref:
ScrollTrigger.create({
trigger: ParrentRef.current,
start: "top bottom",
// markers:true,
animation: animation,
scrub: 1,
});
}
},
{ dependencies: [CurrentProject], scope: ParrentRef, revertOnUpdate: true }
);