Streaming live at 10am (PST)

Enlarge image on scroll starting from margin

Hey!

I have built an image section where the margins on the page determine the size of the image (5rem). In one place I want to make that image go from having margins on the page but when scrolling fill the entire screen.

Has made a quick solution now that the image have a min wdith but it can not be compared with the margins on the rest of the page.

Does anyone have a solution to this?


Here is my public share link: https://vh-lab.webflow.io/om-oss
(how to access public share link)

Hi, I believe you can’t animate margins with Webflow interactions. I would suggest you to try the Scale properties. Use a section or scroll % to trigger the scale up.

Thanks, as I thought …

If I animate the scale on a section with margins left and right, can I know for sure that it covers the screen?

Here’s another idea to make sure it’s pixel perfect. Instead of margin/padding, use transparent divs. Setup the parent as a flexbox and use div blocks where you want the margin/padding. then animate the top & bottom divs’ height from 5em to 0 and the right & left divs’ width from 5em to 0.