Create a hide and show modal

Hi guys,
I am trying to recreate this behavior ( click on +project info. I sort of created the modal and added two links, one for (+ project info) and one within the modal for hiding info. This because I have not yet figure out how to make one link with two words transitioning.

For the hide info link, I added a click trigger interaction with display none and 0% opacity, but I think that makes the + project info not clickable afterward. Here is a small clip with the behavior.

In my project link, you can go to the residential collection page.

I will appreciate very much any kind of help.

Here is my public share link:

Hi @Sebasgaes great question!

I noticed that in your “hide interaction” you have the modal element set to display: none, so for your “more info project” interaction you need to set it to display: block at 0% opacity in the first step with 0ms, add another step to fade to 100% opacity and then you should have a nice fade in effect each time.

For your hide interaction, if you add a “0% opacity” step with some kind of ease, and then a step right after it to display: none that should make it fade out instead.

​Hope that this is helpful! :smiley:

Thank you very much for taking the time to look into this. If I set display: block the container will go like this:

Can I have it to display flex? Also, I don’t know what is happening with the hide information, is not doing anything.

Here is the more info:

And here is the screen shot for the hide info interaction:

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.