Masking the Animation?

Hi everyone,

I am new to making animated content with Webflow. I am struggling with one detail about animations. It drives me crazy.

I saw on many websites that some certain animations always stay within its “container”. If that’s right way to say it. Like, the masking tool in Photoshop. For example, if I want an object to start with a bigger scale then get back to its original size, it starts bigger/zoomed in as I want, but the object is exceeding its container. So it doesn’t look like what I see on other websites. How can I fix this problem?

For example, on this web site, images start scaled up then goes back to original size. While doing that the images stay within its “container”, not exceeding its container’s borders.

https://blog-magazine-template.webflow.io/

Thank you!

What you’re probably looking for is overflow: hidden. Making a containing element (in your example, a div wrapping around your growing image) and set it’s overflow to hidden.

If you have a specific example, go ahead and include a share link and I (or someone else here on the forum) can help you out. Let me know if you have any issues. :metal:

2 Likes

I’ve tried this solution for another section on my own website yesterday. And it didn’t work. I literally spent hours to figure things out. Then gave up.

This morning I said I’ll try again. So I’ve started working on another section on my website and this time your solution worked! I don’t know why it didn’t work yesterday, but thank you! I’ll check the section I was working on yesterday again. Webflow is messing with me! :smiling_face_with_three_hearts:

1 Like