Tips: Creating Timeline Animation in Readymag

Hello guys,

I checked out this video: https://www.youtube.com/watch?v=IVNftuVt4nU and so far I managed to do it.

My timeline goes from 1960 - 2024: So what animation trick to do when the number in the front changes from 19 to 20? Is there an animation trick to make the 19 disappear and the 20 appears or anything else? Would appreciate help! ˙ᵕ˙

Try adding an opacity effect for the 19 to go from 100 to 0 after ‘x’ px and then do the opposite with the 20.

Alternatively, if you site has pages stacked, simply create the 20+ era on a new page.

1 Like

Thank you! I will try that - I had the feeling that the px setting doesn’t work properly :confused:

How so? Been working on animations without issues lately.

Okay. I vanished for a while, but I’m working on it again since I had another project. For some reason I can’t see the pixel number for the object anymore. It’s only shown in Percentage - do you have any idea what this could be about?

Can you share screenshot to see how this looks for you?

1 Like

This is what it looks like right now. Usually I could see the px next to the object-box.

I’m confused, the sizes are right there, the “19” widget is 116 by 140. Perhaps you mean something else?

I’m referring to the pixel number of the on-scroll animation. Because usually I could see the number of pixels on the page where I put the object/widget/text/etc (now there’s just the 186% instead of pixels). while setting the offset px. I don’t know how else to explain it. But since I can’t see the pixel number, I can’t set the widget “19” to a specific point where the animation should start, as I used to do before.

Maybe I’m confusing something - sorry for confusing you :smiley:

And also I think this is also a problem for me, since my timeline doesn’t start at the top of the page so the 19 needs an opacity effect in the beginning to pop up and then I can’t use it for Scroll animation to disappear again when the 20 should appear.

The only solution that comes to my mind right now is to stack the pages. Is there a way to only stack two pages of a whole project?