Home > CSS3 & CSS > Radial SVG Slider with CSS3
Radial SVG Slider with CSS3

Radial SVG Slider with CSS3

Radial SVG Slider is a simple, responsive slider, with a radial transition effect powered by SVG clipPath and mask elements.

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).

  Website Demo

About admin