punadev Posted January 10, 2022 Share Posted January 10, 2022 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 More sharing options...
Solution GreenSock Posted January 10, 2022 Solution Share Posted January 10, 2022 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 More sharing options...
punadev Posted January 10, 2022 Author Share Posted January 10, 2022 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 More sharing options...
GreenSock Posted January 10, 2022 Share Posted January 10, 2022 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 More sharing options...
punadev Posted January 10, 2022 Author Share Posted January 10, 2022 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 More sharing options...
GreenSock Posted January 10, 2022 Share Posted January 10, 2022 No big deal - you got it working the way you wanted, though, right? Link to comment Share on other sites More sharing options...
punadev Posted January 10, 2022 Author Share Posted January 10, 2022 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! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now