I am trying to recreate an animation I found on this website, https://www.verdadesign.com/. When scrolling down to the “Why choose us for your next project” section on the homepage, on scroll, there are boxes with text that move in towards the center and then back out, and, transition from opacity 0 to opacity 100 and then back to 0. I was able to recreate the same animation no problem, but when scrolling their website, the boxes move absolutely fluid. But the boxes in my Webflow animation move jittery, kind of like they are climbing small steps versus sliding on a slide. Is that something that can be changed in some settings, or will that be smooth when the site is published? Why does that happen?
Actually I just realized that it is the whole page that is jittery on scroll, not just the element animation. When scrolling any website in Chrome, they scroll smoothly, but when scrolling a Webflow website in the editor in preview mode, it seams that scrolling action shows every like 10th frame instead of showing every frame kind of deal, making the whole page appear like it jumps in small increments instead of moving smoothly, and I guess that makes the animation look jittery as well. Any idea why this is happening and what can be done about that?
I see. So the chrome scroll smoothing is turned off as a default. Is there a way to turn it on? That would be nice. That way I could see how it actually will look and not just hope that everything will look fine.
Alright, I guess that is a way to do it. Right at this moment I am practicing my Webflow skills by rebuilding all kinds of websites, and for that purpose I will not be publishing all these “practice” websites just to see how things look. I guess I will just have to trust the system that everything should work smoothly once published. I will do that as soon as I am ready to publish my first project though.