bayti

I've managed to find the solution which was really simple, I'm going to post it here for anyone in the future trying the same thing and close the post. All that was need was to add scroller: "#home-container", under the scrollTrigger like so gsap.to(airpods, { frame: frameCount - 1, snap: "frame", ease: "none", scrollTrigger: { scroller: "#home-container", scrub: 0.5 }, onUpdate: render });

This is probably really obvious, but i can't make it work. Basically I adapted the code from the given codepen to my react project but I can't get it to work in the way I want. What I'm trying to do is make use of image sequence animation triggered by scrolling while also snapping to full screen sections. I've managed making these work individually but when I tried combining them is when I ran into trouble. The conclusion I came to is: the way I have it setup now, for the scroll snapping to work is body overflow:hidden and everything is taking place in a container div configured for snapping which is scrolling. Now the canvas animation is not triggering because it is expecting for the window to scroll which is not actually happening it is the div that is. I think the solution should be me directing and giving the right scroller to ScrollTrigger but I can't get it to work. I'm going to share the code below and I thank anyone in advance for any help provided. index.css Home.js Solutions I tried are a combination of the code below: I should mention that using this code above made the animation play trough once upon refreshing the site but it would not respond to the scroller. I'm sorry if the post is breaking any forum rules and if I didn't explain the problem quite as well as I could've.