Streaming live at 10am (PST)

I want to have a circle slider

I’m wanting to make my slider take on the shape of a circle. What can I do?

Hi, it’s a good idea, I gave it a shot here: (the site is public you can clone it, follow the green link on top).

Don’t have time right now to dive in to add interactions but I will, for fun (:

Also check this experiment, it’s using a slider trigger interaction :

btw circles are obtained by setting a 50% corner radius to any div, box, bloc, thing…

1 Like

Thank you! Great tip on 50%, never even thought of that!

And of course when you do that, you need to also set the element to overflow:hidden.

You will find by yourself that if you don’t add a class to the Mask element, and give him also the circular + overflow hiden property, the animation bugs: the slides aren’t masked when the animation runs.

1 Like