Now streaming live

Change Border Radius on Scroll


#1

Hi everyone,

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

Thanks!


#2

Hey @Cameron_Johnson,

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

Best,
Naweed


#3

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.


#4

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


#5

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

Thanks!


#6

You're welcome @Cameron_Johnson :slight_smile:

I love these little Webflow hacks.