How to recreate “fly in from bottom → stick → release” scroll interaction in Readymag?

Uncategorized
1

Hi everyone,

I’m trying to recreate a scroll interaction similar to the three cards that appear from bottom on https://filmtopia.net/:

  • Cards appear from the bottom of the viewport

  • They move into position

  • Then stay fixed for a while as you keep scrolling

  • After that, the page continues scrolling and they move away normally

I understand that Readymag only supports fixed widgets and scroll animations, but I can’t figure out a clean way to:

  • have a widget enter from below the viewport

  • then become fixed

  • without visible jumps or duplicating elements

Is there a recommended Readymag pattern for this (e.g. fixed + scroll animation setup), or is this interaction not fully supported in Readymag?

Any guidance or examples would be hugely appreciated.

Thanks!

2

hey…

you would do it like this:

add a scroll animation to your “card”. the animation should be: moving down (this would later be the time it stays fixed on the screen") then change the animation easing to linear and play around with thestarting point: Choose top and define the distance from the upper border.

the cardelement should not be fixed to the screen.

3

Thanks! I can’t manage to make it work. For example, with the title, which I’d like to “pin it” (not using fixed) until the cards reach the screen, I can’t make it move up then stay. The title stays at aprox at 224 ppixels from top and I want it to move to aprox 48 px from top and then “stay” until the cards reach its place. How would I go about it?

4

there is a little setting inside the animation settings in which you can set when the animation should start: if the elements reaches top/mid/bottom of the screen. here you would choose top and then drag the offset down 48px…

5

Hi! I have a question about this same type of animation. I’m using several objects that appear one by one until a complete structure is formed, before moving upwards. I’m using the scroll-based movement animation with the starting point set to “top.” However, the animation doesn’t look smooth because it requires multiple scrolls to complete. Is there a way to improve this, or will the same thing always happen since the scroll distance is long? I followed the steps for animating it based on your comment in this forum! Here is the preview: ‘Coordenadas’ from ‘Project’