Radial SVG Slider
June 2, 2016 | 21 Feedbacks

Radial SVG Slider

A simple, responsive slider, with a radial transition effect powered by SVG clipPath and mask elements.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera

While browsing Dribbble in search of inspiration, we came across this interesting animation created by Tokito. The main idea is to show a little preview of the following slide, then scale it up when the user interacts with it.

In order to create this effect, SVG clipping and masking elements sounded like the perfect allies.

Let’s break this up in steps: first of all, we needed to show a preview of both previous and next slides. Therefore, for each slide, we needed 2 paths: a circle element to clip the part of the image visible at the beginning (the navigation CTA), and a second circle element that covers the entire slider (obtained by increasing the radius of the first circle element).

Here is a preview of the 2 paths created in Illustrator on 2 separate artboards, and then exported as SVG files. You’ll find these vectors inside the source files.


By using the clipPath element, you can define the visible area of an image. Then, obviously, if you animate the clipPath element, you animate the visible area of the image you’re applying the clip to.


Now the tricky part: by animating the circle element the user interacts with, we cover the entire slider, including the opposite round/navigation item. To fix that, we used the SVG mask element: basically we set an area where the animated circle element won’t be visible, no matter what . This mask is equal to the size of the round/navigation element we don’t want to cover.

Masks use transparency. Therefore, using a vector graphic tool, we created a white path that covers the entire SVG viewport, except the area we want to mask out.


Here is a quick animation we put together to show you the idea behind the clipping + masking.


Images: Unsplash

Creating the structure

The HTML structure is composed of two unordered lists: a ul.cd-radial-slider for the slides and a ul.cd-radial-slider-navigation for the slider navigation.

Each list item inside the ul.cd-radial-slider is composed of two main elements: a .svg-wrapper containing a svg with a  <clipPath> element (used to change the clipping area of the slide image) and an <image> element (whose clip-path url attribute is the <clipPath> id), and a .cd-radial-slider-content for the slide content.

An additional .cd-round-mask is used to wrap the two <mask> elements.

Adding style

The slider structure is quite basic: all slides have an opacity: 0, are in absolute position and are placed one on top of the other (top: 0 and left:0). The .visible class is added to the selected slide (at the end of the clipping animation) to change its position from absolute to relative, while the .is-animating class is added to the slide during the clipping animation to change its z-index. The .next-slide and .prev-slide classes are instead used to show a preview of both the previous and next slides.

Two additional classes have been used to animate the navigation round elements: a .scale-down class to hide the slide preview when a new slide is selected (scale-down effect) and a .move-up class used to create the click effect when one of the slide previews is clicked on.

Events handling

To implement the radial SVG slider, we created a radialSlider object and used the bindEvents function to attach event handlers for the click to the slider navigation:

To animate the slide image clipping area, we animated the 'r' attribute of the <circle> element inside the <clipPath>.
We added to the .cd-radial-slider element a data-radius1 and a data-radius2 attribute to easily retrieve the initial and final radius values, and a data-centerx1 and data-centerx2 for the <circle> center (two different values for the next and previous slide preview).
We then used the animate() method provided by Snap.svg to animate the circle element.

The easing function is a custom cubic-bezier function; unfortunately, this is something which is not available by default in Snap.svg, but you can create a custom timing function from your custom cubic-bezier (here’s a StackOverflow post that covers it in details).

To apply a mask to the visible slide, instead, we changed the style attribute of the svg <image> element. For example, to mask the slide so that the next slide preview is visible we used:

where this.slides.eq(this.visibleIndex) is the visible slide and this.rightMask.attr('id') is the id of the <mask> element.


Jun 6, 2016
  • Fixed bug with svg mask on IE11
Jun 2, 2016
  • Resource released by CodyHouse

Claudia Romano

Web developer, fan of The Big Bang Theory and good food. Co-founder of CodyHouse and Nucleo. You can follow her on Twitter.

  • Scott Romack

    This is awesome, I was under the impression that IE didn’t support clip-path. Very cool!

    • http://codyhouse.co Claudia Romano

      Hi Scott, thanks for the heads-up, we’ll look into this!

  • mafhper

    Simple and Beautiful. Magnificent!

  • https://getciao.com/?ref=disqus-profile-about-section Jeffrey Bennett

    You guys always have such brilliant interactions! I love them. Thanks for sharing these. :)

  • http://media-church.ru Alex Naghtigall

    Thank you!!!

  • http://codepen.io/suez/ Nikolay Talanov

    I made similar slider with css clip-path. Browser support and performance not as good as this svg version, but I guess it’s still worth to share – http://codepen.io/suez/pen/grJONP

    • Uma Lila

      hello!! thats amazing effect given by you. can you please tell me how can i apply it to my college project
      thanks…have greatday

  • Mr. Bitter

    Any ideas on how I could make this an auto-run type of slideshow?

    • Stepan

      +1 How?

      • Prakhar Singh

        Create A function

        function rotate(){
        setTimeout(‘rotate();’,3000); // Edit Delay as you wish

        and call it when document is ready.

        • lala

          where do I add this function ?

  • Shuvo


  • km

    hello :) there is any posible way to convert this like that ?

  • Samji

    Wow! can definitely see a use for this in my current project – thanks! (I see some atom.io in that code!!)

  • Kawser Nasim

    Im trying to get it to work on wordpress but it is not fubctioning the way it should!! Any solution??

    • Mat Teague

      I am also struggling to get this to work correctly with WordPress. I think my issue is with the ‘cx=”110″ cy=”400″ r=”100″‘ as they seem quite buggy with the images that are used through the CMS

    • Antonio Trifirò

      Hello everyone!
      I made a WP plugin with this awesome slider: if Claudia allows me I can try to upload it on GitHub or also on the WP repository.

  • Ihor Kyptsiv
  • Dixon Mbugua

    You guys are really cool

  • Olivier Gousseau

    Hi Claudia, thanks for this nice slider !!!
    Just a question, how can i manage / change the height ?

  • http://mcmiv.com/ ddrt

    I’m not exactly sure what I’m missing so I’m asking for help: All I want to do is stack multiple slides on top of each other but each time I add in a new inside of its own , they either don’t show up on first load, when I resize the window they show up but then the animations don’t work, the list goes on. I’ve been working at it for a few hours now and I just thought I’d drop a line to see if you knew. Am I missing something in the css maybe?