Streaming live at 10am (PST)

Maintain corner radius while image moves

Hey there.
I’m trying to implement an interaction that subtly moves a div’s BG image up and down as you scroll. While also maintaining the div block’s corner radius.
I’m able to achieve the movement, but it seems to ignore the corner radius when the image moves.

It looks like what’s actually happening is that the entire block is moving, and cropping whatever is outside of its original bounds.

In my head, this should work like a “clipping mask” in Adobe Illustrator, where the image should be able to move while maintaining the container’s corner radius. But since I’m still new to Webflow, I’m not sure what’s the best way to go about this.

Any direction or examples of how to properly achieve this would be awesome.
Thanks!


[2]: https://university.webflow.com/article/sharing-your-sites-read-only-link