ej2

I was able to fix the resizing issue with the help of GSAP's ScrollToPlugin.

Hello @Rodrigo Thank you but this is not what I was talking about. What I was talking about was concerning responsiveness, let's say I was a developer / user of a site and I clicked on the inspect tab to check the web resources loaded and I returned back to the site after checking the gsap animation gets displaced in a weird way and So I want to return the user properly to the gsap animation when displaced so they can continue scrolling through the animation till they finish. I thought about using ELEMENT.scrollIntoView() or Window.scrollTo() to put the gsap animation back into view but none worked and also on mobile, the animation becomes jittery. Maybe this might help, here is a link to understand better what I'm talking about.

Hey @GreenSock Here is a replica of what I was trying to explain earlier and also it becomes jittery on mobile devices. https://codepen.io/ecj222/pen/BaGbGvr

Hello @GreenSock, How would you make an element with a ScrollTrigger (also with a pin set to true) of a height of 100vh (full viewport height) maintain its current position even while resizing? I have tried scrolling the element back to the current view and also using Window to try to set the scroll position to the element but doesn't seem to work. Thank you for any assistance you can offer on this.

You were right. All I had to do was remove the second scrollTrigger in the useEffect hook and leave just the tween and it worked fine. Thank you @Cassie const targets = gsap.utils.toArray(".end svg path"); timeline.current.to(targets, { opacity: 1, duration: 1, stagger: 0.05, });

@Cassie I noticed when I needed to add another ScrollTrigger attached to a different element it triggers at the same time as the first one because the end is too small (+=100) and If the end is increased the scrolling animation experience is not as good. is there a way I could only begin the second animation when the first Scrolltrigger ends? Here is the code for the second ScrollTrigger useEffect(() => { ScrollTrigger.create({ markers: true, trigger: ".end", start: "top top", end: "bottom bottom", onEnter: () => { const paths = document.querySelectorAll(".end svg path") as NodeListOf<HTMLElement>; const targets = gsap.utils.toArray(paths); timeline.current.play(); timeline.current.to(targets, { opacity: 1, duration: 1, stagger: 0.05, }); }, onLeaveBack: () => { console.log("leave"); stopEndAnimation(); const gameEl = document.querySelector(".game"); gameEl?.scrollTo({ top: 0, behavior: "smooth" }); timeline.current.restart(); timeline.current.pause(); }, }); }, []);

This was what I needed and it works perfectly! Thank you, @Cassie.

I'm trying to end a ScrollTrigger animation programmatically. I currently use the Observer plugin for animating through frames of images, and the ScrollTrigger animation to `pin` the current I'm trying to scroll into scope so that way when users scroll it doesn't end up going back to the previous tab without the animation restoring or completing first. Or if there's a way I could `pin` an element using the Observer plugin instead please let me know. The ScrollTrigger comes in handy when I want to make the scroll become much longer so it enables the Observer plugin to completely move through all the image frames so it completes. Why not just use only ScrollTrigger instead? The problem with that is I need to have control over the speed of how image frames are rendered and the ScrollTrigger becomes Jiterry if you try to set the document's body or documentElement(Html) overflow hidden causing a rerender and resetting the scroll state. Here's a stack blitz: https://stackblitz.com/edit/stackblitz-starters-jhpqit?file=src%2FGame.tsx I appreciate your help.

Thank you, @mvaneijgen This video you sent solved the problem, I was having!

const drawImage = useCallback(() => { const image = images[defaultFrame.frame]; const canvas = document.querySelector("canvas") as HTMLCanvasElement; // window.innerWidth canvas.style.width = `${width}`; // window.innerHeight canvas.style.height = `${height}`; const context = canvas.getContext("2d") as CanvasRenderingContext2D; // window.innerWidth context.canvas.width = width; // window.innerHeight context.canvas.height = height; context.clearRect(0, 0, canvas.width, canvas.height); // Draw the image on the canvas //, width, height context.drawImage(image, 0, 0, canvas.width, canvas.height); }, [defaultFrame.frame, height, images, width]); const initGSAP = useCallback(() => { gsap.to(defaultFrame, { frame: frameCount - 1, snap: "frame", ease: "none", scrollTrigger: { scrub: true, pin: "canvas", }, onUpdate: drawImage, }); gsap.fromTo( ".game", { opacity: 0.1, }, { opacity: 1, scrollTrigger: { scrub: true, start: "0%", end: "100%", }, onComplete: () => { // do stuff }, } ); images[defaultFrame.frame].onload = drawImage; }, [defaultFrame, drawImage, images]); I want to reduce the speed of my gsap image animation on scroll, please how can I achieve this? Here a video