# Tips: Creating Timeline Animation in Readymag **URL:** \ **Category:** Animations\ **Created:** [March 14, 2025, 11:38am UTC](https://forum.readymag.com/t/tips-creating-timeline-animation-in-readymag/4552 "2025-03-14T11:38:16Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![E\_L](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/e_l/32/3059_2.png) [@E\_L](https://forum.readymag.com/u/E_L)\ **Post date:** [March 14, 2025, 11:38am UTC](https://forum.readymag.com/t/tips-creating-timeline-animation-in-readymag/4552/1 "2025-03-14T11:38:16Z")
Hello guys, I checked out this video: [https://www.youtube.com/watch?v=IVNftuVt4nU](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! ˙ᵕ˙ ---
**Author:** ![Samus](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/samus/32/1146_2.png) [@Samus](https://forum.readymag.com/u/Samus)\ **Post date:** [March 19, 2025, 12:54am UTC](https://forum.readymag.com/t/tips-creating-timeline-animation-in-readymag/4552/2 "2025-03-19T00:54:35Z")
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. ---
**Author:** ![E\_L](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/e_l/32/3059_2.png) [@E\_L](https://forum.readymag.com/u/E_L)\ **Post date:** [March 19, 2025, 9:01am UTC](https://forum.readymag.com/t/tips-creating-timeline-animation-in-readymag/4552/3 "2025-03-19T09:01:01Z")
Thank you! I will try that - I had the feeling that the px setting doesn’t work properly 😕 ---
**Author:** ![Samus](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/samus/32/1146_2.png) [@Samus](https://forum.readymag.com/u/Samus)\ **Post date:** [March 19, 2025, 11:15pm UTC](https://forum.readymag.com/t/tips-creating-timeline-animation-in-readymag/4552/4 "2025-03-19T23:15:26Z")
How so? Been working on animations without issues lately. ---
**Author:** ![E\_L](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/e_l/32/3059_2.png) [@E\_L](https://forum.readymag.com/u/E_L)\ **Post date:** [April 11, 2025, 2:49pm UTC](https://forum.readymag.com/t/tips-creating-timeline-animation-in-readymag/4552/5 "2025-04-11T14:49:55Z")
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? ---
**Author:** ![Samus](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/samus/32/1146_2.png) [@Samus](https://forum.readymag.com/u/Samus)\ **Post date:** [April 11, 2025, 6:03pm UTC](https://forum.readymag.com/t/tips-creating-timeline-animation-in-readymag/4552/6 "2025-04-11T18:03:08Z")
Can you share screenshot to see how this looks for you? ---
**Author:** ![E\_L](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/e_l/32/3059_2.png) [@E\_L](https://forum.readymag.com/u/E_L)\ **Post date:** [April 14, 2025, 10:02am UTC](https://forum.readymag.com/t/tips-creating-timeline-animation-in-readymag/4552/7 "2025-04-14T10:02:37Z")
![Bildschirmfoto 2025-04-14 um 12.01.14](https://us1.discourse-cdn.com/flex015/uploads/readymag/original/2X/b/b9a5d085c7aad738bab5cab47321e0b822e93256.png) This is what it looks like right now. Usually I could see the px next to the object-box. ---
**Author:** ![Samus](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/samus/32/1146_2.png) [@Samus](https://forum.readymag.com/u/Samus)\ **Post date:** [April 15, 2025, 12:02am UTC](https://forum.readymag.com/t/tips-creating-timeline-animation-in-readymag/4552/8 "2025-04-15T00:02:08Z")
I’m confused, the sizes are right there, the “19” widget is 116 by 140. Perhaps you mean something else? ---
**Author:** ![E\_L](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/e_l/32/3059_2.png) [@E\_L](https://forum.readymag.com/u/E_L)\ **Post date:** [April 17, 2025, 10:33am UTC](https://forum.readymag.com/t/tips-creating-timeline-animation-in-readymag/4552/9 "2025-04-17T10:33:09Z")
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. ---
**Author:** ![E\_L](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/e_l/32/3059_2.png) [@E\_L](https://forum.readymag.com/u/E_L)\ **Post date:** [April 17, 2025, 10:37am UTC](https://forum.readymag.com/t/tips-creating-timeline-animation-in-readymag/4552/10 "2025-04-17T10:37:57Z")
Maybe I’m confusing something - sorry for confusing you 😃 ---
**Author:** ![E\_L](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/e_l/32/3059_2.png) [@E\_L](https://forum.readymag.com/u/E_L)\ **Post date:** [April 17, 2025, 10:59am UTC](https://forum.readymag.com/t/tips-creating-timeline-animation-in-readymag/4552/11 "2025-04-17T10:59:25Z")
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. ---
**Author:** ![E\_L](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/e_l/32/3059_2.png) [@E\_L](https://forum.readymag.com/u/E_L)\ **Post date:** [April 17, 2025, 11:10am UTC](https://forum.readymag.com/t/tips-creating-timeline-animation-in-readymag/4552/12 "2025-04-17T11:10:58Z")
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? ---
**Author:** ![Samus](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/samus/32/1146_2.png) [@Samus](https://forum.readymag.com/u/Samus)\ **Post date:** [June 17, 2025, 8:18pm UTC](https://forum.readymag.com/t/tips-creating-timeline-animation-in-readymag/4552/13 "2025-06-17T20:18:08Z")
Got caught up—sorry (hope it is not too late). No, not possible to stack just a few pages; it has to be all of them or default navigation (horizontal style). For your case, I think your best bet is to play with fixed position, move effect, and delay. This is the only way I can think of getting the timeline working while avoiding having all pages stacked.