Streaming live at 10am (PST)

Show/hide box to expand


#1

I’m trying to achieve this effect from an old Webflow tutorial. However, when i adjust the size, it doesn’t act in the same way. e.g the box doesn’t visibly drop down and expand the other elements on the page.

The updated video, (with the great VO), only show how to hide/show content, no movement.

Here’s the original video: https://interactions.webflow.com/click-to-show-content-video

Any help would be appreciated! Thanks.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Hi @Tom_Law

Can you please share a read-only link of your project? That will help me see how you’re applying the animation and give you advice on how to make it work.


#3

Sure. It’s in section 15. I’d like the video to drop down when you click the button above:

https://preview.webflow.com/preview/toms-sublime-project-960404?utm_source=toms-sublime-project-960404&preview=44cfcaecbbb4e9c36a4bdd32c2fd67f7


#4

Any thoughts @AnnaKelian?


#5

Hi again @Tom_Law

Thanks for sharing the link and the information.

I see that you’re trying to apply the actions on the video itself. Affecting the video height is tricky, in fact not possible with the way the interaction works. So, instead, we’re going to apply the actions on the div block that contains the video. It’s exactly the same interaction in the video. And don’t forget to hide the overflow on the div block.

Here’s a quick video showing you how it’s done with Interactions 2.0:

CloudApp

Hope this is helpful.


#6

This is amazing! Thank you.