testerhs567

i don't think so , because if the cuz's the lazy loading it's will not work in first visit , but it's work like charm , i'll try other approaches to solve it thanks

Thanks , for the demo is hard to implement it as basic , but just the response i'm look for is there's some methods for reregister the plugin and i will because the issue happen just when i go to other /n project soo that refresh or whatever if already built in , i think will solve Thanks for your time

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 } );

ok

by the way thanks for your response i try to configure it in stackbliz but i get a lot of bugs in it so i will try to find and fix my principle issue for the images , thanks ;}

Try now i update it ,i wish anybody here can help little :} Thanks

how to remove this topic !