I am trying to recreate this behavior (http://studiosaxe.com/project/residential/ocean-eye-terrace-house/) 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: https://preview.webflow.com/preview/studio-saxe?preview=cc72ae0f5f34c4bc354f3518fe278f5f
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!
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.