punadev

I did, thanks! its not as smooth as i wanted but its super close, thank you very much!

indeed i was not, im new to gsap and smooth scrollbar, i dont know how to update it really. Sorry for not providing a working demo

it does not, it keeps the canvas at the top while i scroll past it, i copied the code from a tutorial, im not completly sure why it uses transform, sorry EDIT: i removed smooth scrollbar and changed it to fixed and it looks like it working way better. thanks a lot!

Hey, im trying to do a scroll animation thats swaps images as you scroll, my problem is that the animation "shake" while scrolling, this only happens the first couple of times you scroll, but it is not a loading problem i think since if i let it load for a couple of mins it still is shaky. Also once you scroll all the way down, the last frame kinda reset. Any idea what i could do? https://cargoweb.netlify.app/#/home (the first animation) const tl = gsap.timeline({ scrollTrigger: { trigger: container, scrub: 1, start: "top top", end: "200%", pin: true, pinType: "transform", anticipatePin: 1, } }); // canvas resize handler window.addEventListener('resize', function resize() { ctx.canvas.width = document.documentElement.clientWidth; ctx.canvas.height = document.documentElement.clientHeight; return resize; }()); // when all images ready images.then((imgs) => { this.onReady.emit(true); const counter = {i: 0}; // iteration object tl.to(counter, { i: imgs.length - 1, // increment counter to frames length roundProps: "i", // round, only int ease: "none", // ease provided by smooth-scroll momentum immediateRender: true, // render first frame immediately onUpdate: () => this.calcDrawImage(ctx, imgs[counter.i]) // draw image in canvas when timeline update }, 0); // draw current frame again when scroll stopped and resize happened window.addEventListener('resize', () => this.calcDrawImage(ctx, imgs[counter.i])); });