# Help recreating this Readymag animation

**URL:** <https://forum.readymag.com/t/help-recreating-this-readymag-animation/2804>\
**Category:** Animations\
**Created:** [April 18, 2024, 4:54pm UTC](https://forum.readymag.com/t/help-recreating-this-readymag-animation/2804 "2024-04-18T16:54:45Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![orion\_janeczek](https://avatars.discourse-cdn.com/v4/letter/o/7993a0/32.png) [@orion\_janeczek](https://forum.readymag.com/u/orion_janeczek)\
**Post date:** [April 18, 2024, 4:54pm UTC](https://forum.readymag.com/t/help-recreating-this-readymag-animation/2804/1 "2024-04-18T16:54:45Z")

</div>

I am trying to make something similar to this INDEX menu animation on [this](https://newopen.design/philipperahm/) beautiful site which was made on readymag.

What I like is that the animation has a trigger to come into the window, but it has another trigger (the X) to leave.  
Maybe it’s custom, but if it’s possible to make something like it within ready mag, I would love to find out.  
Seems like ready mag animations are like light switches, functionally working on and off, but this one is closer to a three-way switch. Any thoughts on how to do this?

---

<div class="post-metadata">

**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\
**Post date:** [April 19, 2024, 2:25pm UTC](https://forum.readymag.com/t/help-recreating-this-readymag-animation/2804/2 "2024-04-19T14:25:56Z")

</div>

well, you can assign more then one trigger to a animation.  
menu opens on click on index and closes on click on index or on the X. As the X isn´t visible if the menu is closed this works well.

here the menu also closes on click on any menuitem, which is done with custom code.

ps: I built the website.

---

<div class="post-metadata">

**Author:** ![David\_Pindrys](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/david_pindrys/32/1838_2.png) [@David\_Pindrys](https://forum.readymag.com/u/David_Pindrys)\
**Post date:** [February 21, 2025, 2:22pm UTC](https://forum.readymag.com/t/help-recreating-this-readymag-animation/2804/3 "2025-02-21T14:22:11Z")

</div>

That’s a gorgeous site. Did you use a template to make it?

---

<div class="post-metadata">

**Author:** ![orion\_janeczek](https://avatars.discourse-cdn.com/v4/letter/o/7993a0/32.png) [@orion\_janeczek](https://forum.readymag.com/u/orion_janeczek)\
**Post date:** [February 22, 2025, 5:36am UTC](https://forum.readymag.com/t/help-recreating-this-readymag-animation/2804/4 "2025-02-22T05:36:20Z")

</div>

Hey, thanks. I started with a template, I think it was A-Bureau–but I altered it a ton.

---

<div class="post-metadata">

**Author:** ![Marta\_Mateu\_Lloveras](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/marta_mateu_lloveras/32/2809_2.png) [@Marta\_Mateu\_Lloveras](https://forum.readymag.com/u/Marta_Mateu_Lloveras)\
**Post date:** [June 22, 2026, 11:14am UTC](https://forum.readymag.com/t/help-recreating-this-readymag-animation/2804/5 "2026-06-22T11:14:10Z")

</div>

Hiya, I am trying to do this by using click animation opacity from 0-100 with a tile as a trigger but then I want to use an X button as a trigger to make the video disappear (opacity from 100-0) but can’t seem to have two different opacity animations on the same step. Is there another way to do this? many thanks 🙂

---

<div class="post-metadata">

**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\
**Post date:** [June 26, 2026, 9:40am UTC](https://forum.readymag.com/t/help-recreating-this-readymag-animation/2804/6 "2026-06-26T09:40:20Z")

</div>

but you can have several elemnts as triggers.  
so first trigger is the “open video”: videoelement gets shown & cross appears.  
The cross is a second trigger
