Search the Community

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

Greetings! My apologies in advance if the answer to this question exists somewhere. I have had a look but I've not been able to spot anything conclusive. I've used TweenMax exclusively for years in my HTML5 banners, and sometimes my banners have quite a lot of animation going on throughout. However there are typically time limits for animation (after which no animation can be going on), so when it comes to stopping every animation, I used to rely on the extremely useful TweenMax.killAll(); to end everything at the same time; particularly useful when there are dozens of animations (on smaller things) running at the same time. Though GSAP 3 was released a while back, I've only just begun to adopt it into my banner development process. However, it seems (unless I am mistaken - and please do correct me if I'm wrong) that killAll() no longer exists as a function. I'm sure there's a very good reason for this, and I know I can still kill the animations of everything individually, but it seems like unnecessary extra custom code I now need to write when there was previously a function to do this automatically for every single active tween, in one single stroke. Am I missing something? Is there a plugin or something else I have been embarrassingly oblivious to? Many thanks!