Hello, I am unable to recreate Webflow’s “Reveal content on click” interaction/animation as can be seen on Webflow’s “Website interactions & animations” page. Link and screenshot of what I am after are below. Happy to pay someone to help me with this.
I have looked at the “Show & Hide Elements on Click” tutorial, but that is not enough for me to be able to recreate the effect of the “+” symbol moving up vertically and then “pulling up” a second page with it, and then when clicking the “x” symbol, the second page disappears again.
I scoured the forum but could not find a topic that covers this. If anyone can point me in the right direction of how to achieve this effect, that would be great, as I am lost here. I imagine several actions have to happens following the “on click” event, but I just do not know how to do it.
(I didn’t think there was any point in sharing my “read only site link”, as I am not able to even get close to designing this effect.)
That means children of this element that have content “outside” of the visible area of this div, it will be hidden, thus this div acts as a mask to it’s children.
You can see the transform change here, with the y value going from 100% previously to 0%:
That is the general idea behind this. In the Webflow example it’s a bit more complicated as the div that moves up is the parent of both the button and the div with the “Exotic Islands” image inside of it. Which once you understand this, does not really add that much of a challenge, it’s just difficult if you don’t get the basic concept.
You could even start by just creating a parent div in the designer, setting overflow to hidden, position relative and then placing a child inside with position absolute and moving it around using the just the basic positioning tools in Webflow and see this effect in the designer.
Hello Sam, thanks so much for this explanation. I’m still quite new to Webflow, but I think I understand most of what you described. I will have a go at this today, and I will let you know how it went.
If I get it to work, I will post my method in case anyone else wants to have a go at this.
