Change Border Radius on Scroll

Hi everyone,

Quick question, has anyone figured out a way to change the border radius on scroll?

Thanks!

Hey @Cameron_Johnson,

Like this http://codepen.io/yy/pen/ByrMZR ?

Best,
Naweed

Hey @nwdsha!

No, but that would love to do that too!.

I just meant simply the same way we create an interaction to transform an object when you scroll into view, is how I wanted to change the border radius when you scroll into view.

Hey @Cameron_Johnson,

I came up with an idea today. How about stacking 2 divs on top of each other, one has a radius and the 2nd doesn’t.

When you scroll into view, the non radius div will disappear and the radius div will appear.

Play around with it and see what you come up with.

Best,
Naweed

2 Likes

That’s a great idea! I have changed the design since, but I’m sure I’ll use that at some point.

Thanks!

2 Likes

You’re welcome @Cameron_Johnson :slight_smile:

I love these little Webflow hacks.

1 Like

Just tested and this solution works for me. Thanks @nwdsha. I used two divs with position absolute inside the parent div. One with border-radius 5px all over and another one with 5px radius for only top left and right. And with interactions made them switch. Used that for styling header of the FAQ section