Jump to content
GreenSock

punadev

frame by frame img scroll is shaky

Go to solution Solved by GreenSock,

Recommended Posts

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

 

 

Link to comment
Share on other sites

  • Solution

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? 

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×