I use the move functionality on a project I am working on right now (https://mini-maison.ca) to keep certain elements in place while scrolling down. It was pretty smooth until a few weeks ago on desktop, but today when I checked again all the elements using this animation kind of stutter when I scroll.
I also checked other readymag projects such as this one : https://gispertnuria.com/ and the same issue happens on scroll even with scaling elements. I tried using Safari to see if the issue was coming from my chrome version and it is a tiny bit better but still pretty clunky.
It was a known issue on mobile but it was fine on Desktop until now. Does anybody know what happened in the recent weeks that could have triggered this issue? Any fix expected in the near future?
With the help of Elias Tinchon we finally solved my issue by inverting the logic behind it. Instead of trying to fix an element on scroll by moving it down you need to make a fixed element scroll up when needed.
In a few steps:
The element you want to be in a sticky position need to be set to a fixed position, then animated out on opacity 0 (in the animation menu) to be then animated in at opacity 100 when needed.
Here is what all the steps in my fixed animated element looks like:
step 1: opacity 0 + move downward outside of window
step 2: opacity 100
step 3: delay (px number when you want it to appear) + move up
This in-between is when your element is sticky YAY!
step 4: delay (px number when you want it to finally scroll up) + move up outside the window
Hope it’s not too confusing.
Another solution is to stack your pages vertically in sections and have the element you want to be sticky on a fixed position but it means you only have a one pager website. Here is an example of that on Elias’ website : https://isolation-abc.xyz/
For some reason it really helps to Ease the animation I put an in and out ease and it stutters a little bit less. Still not perfect but far better on my end.