Animate on Scroll - Fix position within page


I’m currently designing my first Readymag website - and I’m having an issue with the scroll animation. I’ve added a little storyboard of what I would like to create, and I’m hoping someone has experience with this and can help me.

I understand how to animate on scroll, however, these are my following issues:

  1. I believe in steps `1 - 4, I would need the animation to function on scroll but the actual page itself to remain fixed (not scroll) so that this can all build up to the top of the page (header navigation)
  2. Currently when I apply the animation on the scroll feature - the logo movement works, but since you are scrolling you miss seeing the final placement as it’s moved up and you have scrolled further down.
  3. I would also like the navigation to appear as a send step after the logo has moved - so if I just place it on a load animation - it is possible the user has not completed scrolling in time
  4. If possible, I would like it to be - so that if you scroll back up it stops at the final frame (step 5) - and the entire visual only reappears if you reload the site.

Let me know if this is something that is possible with ReadyMag, and of course, if you have any questions - I tried my best to explain it here, but understand it can be confusing!

Thank you in advance!


well this is only possible with customcode if you want it to be exactly like this.

This can be done with animations (move and scale) with delay+fixed positions.

Not a chance with the native options, unfortunately.