Move on scroll animation stuttering

Hi beautiful readymag community,

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?

1 Like

Hi everyone,

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/

I’m getting the exact same issues.

Was working fine 2 weeks ago and now it’s not. I’ve been in conversation with Readymag support and they haven’t offered me much.

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.