Animated SVG Image Slider is a CodyHouse component: **“A simple, responsive carousel with animated SVG paths used as transition effects.”** Last week we’ve been experimenting with SVG paths to animate the content of a full-page hero slider. Today we use the same technique to create a responsive carousel. This time, though, we used SVG paths to directly clip the slide images, with no need to show an intermediate layer.

The HTML structure is composed by an unordered list (`ul.cd-slider`), containing the slides, and two additional list elements (`ul.cd-slider-navigation` and `ol.cd-slider-controls`) for the slider navigations. Each list item inside the `ul.cd-slider` is composed by an svg containing 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).

To animate the slide image clipping area, we animated the `'d'` attribute of the `<path>` element inside the `<clipPath>`. Once defined the paths, we added to the `.cd-slider` a `data-stepn` attribute (one for each step) equal to the `'d'` attribute of the defined path (to easily retrieve it with JavaScript). We then used the `animate()` method provided by Snap.svg to animate the path element.

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. The `.visible` class is added to the selected slide (at the end of the clipping animation) to make it visible, while the `.is-animating` class is added to the list item during the clipping animation. Note: we had to use the Padding Hack to make the svg responsive.

Besides, we implemented a basic slider for the image gallery (with keyboard and touch swipe navigation, previous/next and dots navigation).