frame by frame img scroll is shaky

[punadev]

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

        });

 

 

[GreenSock]

Hi @punadev. We can't effectively troubleshoot a live site, so if you need help you'll significantly increase your chances of getting a solid answer if you provide a minimal demo. 

 

From my first glance at it, I believe the issue is that you set pinType: "transform" and the browser updates the scroll position on a different thread which isn't synchronized with the JS thread, thus the "jittery" effect occurs. Why did you use pinType: "transform" instead of  "fixed"? I'd try setting it to "fixed" instead - does that resolve things? 

[punadev]

7 minutes ago, GreenSock said:

Hi @punadev. We can't effectively troubleshoot a live site, so if you need help you'll significantly increase your chances of getting a solid answer if you provide a minimal demo. 

 

From my first glance at it, I believe the issue is that you set pinType: "transform" and the browser updates the scroll position on a different thread which isn't synchronized with the JS thread, thus the "jittery" effect occurs. Why did you use pinType: "transform" instead of  "fixed"? I'd try setting it to "fixed" instead - does that resolve things? 

 

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!

[GreenSock]

10 minutes ago, punadev said:

EDIT: i removed smooth scrollbar and changed it to fixed and it looks like it working way better. thanks a lot!

Yep, smooth-scrollbar will definitely mess with things because it totally changes the way scrolling is implemented. My other guess is that when you were using smooth-scrollbar, you forgot to call ScrollTrigger.update() whenever the smooth-scrollbar instance updated its scroll position. Without a minimal demo in CodePen/CodeSandbox, it's not something I can easily decipher, though. 

[punadev]

8 minutes ago, GreenSock said:

Yep, smooth-scrollbar will definitely mess with things because it totally changes the way scrolling is implemented. My other guess is that when you were using smooth-scrollbar, you forgot to call ScrollTrigger.update() whenever the smooth-scrollbar instance updated its scroll position. Without a minimal demo in CodePen/CodeSandbox, it's not something I can easily decipher, though. 

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

[GreenSock]

No big deal - you got it working the way you wanted, though, right? 

[punadev]

41 minutes ago, GreenSock said:

No big deal - you got it working the way you wanted, though, right? 

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