SVG Clipped Slider
July 27, 2016 | 3 Feedbacks

Clipped SVG Slider

A simple slider, with morphing preview images animated using SVG properties.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera

Here on CodyHouse we’ve published a lot of SVG experiments! What’s really powerful with SVG is the possibility to combine path animations with the clipPath element. Add a touch of CSS transformations and you got a spicy recipe!

Inspiration: Music player animation by Veronika Lykova.

Tool used: Snap.svg

Images: Unsplash

Creating the structure

The HTML structure is composed of three unordered lists: a  and a ul.navigation for the slider images and navigation, and a ul.caption for the image captions.

Each list item inside the is composed of a .svg-wrapper element wrapping a <svg> containing a  <clipPath> element (used to change the clipping area of the slide image), an <image> element (whose clip-path url attribute is the<clipPath> id), and a <use> element (whose xlink:href attribute is the<clipPath> id) used to create the layer covering the slide images not in the center.

Adding style

By default, all the list items inside the have a position absolute, an opacity of zero and are moved to the right and scaled down.

The .selected class is then used to move the selected image back to the center and to scale it up.

The .left and .right classes are used to show the preview images on both sides of the selected image; the .left class is also used to move an image preview to the left.

When a new slide is selected, the <path> element used to clip the slide image is animated to reveal a different portion of the image (the entire image if the slide is the .selected one, or just a section for the .left/.right images).

The same classes are also used to control the visibility/position of the image captions. By default, all captions are hidden and moved to the right; the class .selected is used to show the selected caption and move it back to the center, while the .left class is used to hide it and move it to the left.

Events handling

To implement this slider we created a svgClippedSlider object and used the bindEvents method to attach event handlers for the click to the slider navigation.

The showPrevSlide and showNextSlide methods take care of showing the selected slide; these functions are used to add/remove the proper classes from the slide images and captions, and to animate the ‘d’ attribute of the <path> element inside the <clipPath> used to clip the slide image.


Jul 27, 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.

  • Åke

    Great design!

  • Alex Wright

    Awesome! Would love to see keyboard navigation integrated into this. I’ll fork and play around with it as well. Great experiment!

  • Yaseen Ahmed

    having problem intigrating more than one Clipped SVG Slider on same page Kindly Help