Streaming live at 10am (PST)

Need help: Reveal content on click

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.)

Thanks in advance!

https://webflow.com/interactions-animations

@DawsonLab - this is kind of a sliding door effect, I would start with simply animating a div inside of another div, ignore the x symbol.

In this example there is a parent div with overflow set to hidden:

image

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.

Inside the parent div, this div exists:

The initial state of this div set by interactions is set to the y position of 100%:

image

You can see it lines up exactly at the bottom of the parent div with overflow hidden.

When the button is clicked that div is animated upward:

You can see the transform change here, with the y value going from 100% previously to 0%:

image

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.

Does that help?

1 Like

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.

Thanks!