Animated SVG Hero Slider

Animated SVG Hero Slider

A full page slider, with animated SVG elements used as transition effects.

Nucleo icons

Sponsored by Nucleo, a free application to collect, customize and export all your icons as icon font and SVG symbols. Made by the CodyHouse folks!

All the resources available on CodyHouse are released under the BSD-3-Clause license. You can support our project with a Paypal donation 🙌

While surfing the web for inspiration, we bumped into the beautifully-designed Honda HR-V website. When you navigate from a section to the other, the transition is embellished by an animated shape - created using a <canvas> element.

We decided to create something similar, but instead of using canvas, we played with SVG. Also, instead of creating a vertical layout that would require forced scrolling to see the animation, we turned the whole resource into a hero slider.

Resources used:

Creating the structure

The HTML is structured in 3 main elements: an unordered list (ul.cd-slider) containing the slides, an ordered list (ol.cd-slider-navigation) for the slider navigation, and a div.cd-svg-cover, used to create the animated shape visible when you switch from one slide to the next one.

<section class="cd-slider-wrapper">
   <ul class="cd-slider">
      <li class="visible">
         <div>
            <h2>Animated SVG Slider</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, explicabo.</p>
            <a href="#0" class="cd-btn">Article &amp; Download</a>
         </div>
      </li>
      
      <li>
         <!-- slide content here -->
      </li>

      <!-- additional slides here -->
   </ul> <!-- .cd-slider -->

   <ol class="cd-slider-navigation">
      <li class="selected"><a href="#0"><em>Item 1</em></a></li>
      <li><a href="#0"><em>Item 2</em></a></li>
      <li><a href="#0"><em>Item 3</em></a></li>
      <li><a href="#0"><em>Item 4</em></a></li>
   </ol> <!-- .cd-slider-navigation -->
  
   <div class="cd-svg-cover" data-step1="M1402,800h-2V0.6c0-0.3,0-0.3,0-0.6h2v294V800z" data-step2="M1400,800H383L770.7,0.6c0.2-0.3,0.5-0.6,0.9-0.6H1400v294V800z" data-step3="M1400,800H0V0.6C0,0.4,0,0.3,0,0h1400v294V800z" data-step4="M615,800H0V0.6C0,0.4,0,0.3,0,0h615L393,312L615,800z" data-step5="M0,800h-2V0.6C-2,0.4-2,0.3-2,0h2v312V800z" data-step6="M-2,800h2L0,0.6C0,0.3,0,0.3,0,0l-2,0v294V800z" data-step7="M0,800h1017L629.3,0.6c-0.2-0.3-0.5-0.6-0.9-0.6L0,0l0,294L0,800z" data-step8="M0,800h1400V0.6c0-0.2,0-0.3,0-0.6L0,0l0,294L0,800z" data-step9="M785,800h615V0.6c0-0.2,0-0.3,0-0.6L785,0l222,312L785,800z" data-step10="M1400,800h2V0.6c0-0.2,0-0.3,0-0.6l-2,0v312V800z">
      <svg height='100%' width="100%" preserveAspectRatio="none" viewBox="0 0 1400 800">
         <title>SVG cover layer</title>
         <desc>an animated layer to switch from one slide to the next one</desc>
         <path id="cd-changing-path" d="M1402,800h-2V0.6c0-0.3,0-0.3,0-0.6h2v294V800z"/>
      </svg>
   </div> <!-- .cd-svg-cover -->
</section> <!-- .cd-slider-wrapper -->

Adding style

By default, all the slides have an opacity: 0, are in absolute position and are placed one on top of the others (top: 0 and left:0). The .visible class is added to the selected slide to make it visible (opacity: 1).

.cd-slider-wrapper {
  position: relative;
}

.cd-slider > li {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.cd-slider > li.visible {
  /* selected slide */
  position: relative;
  z-index: 2;
  opacity: 1;
}

Events handling

To animate the SVG, we animated the 'd' attribute of the path element inside the .cd-svg-container.
First of all, we had to define the different steps of the animation (in our case, 5 steps to animate from a slide to the next one and 5 more steps to animate from a slide to the previous one); basically we had to create 10 different svg paths elements (all with the same number of anchor points for the animation to properly work), as shown in the following screenshot taken from the Illustrator file (note that some steps seem empty, but they all contain a path).

illustrator-close-up

Once the paths have been defined, we added to the .cd-svg-cover 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 from a path to the next one:

var svgCoverLayer = $('.cd-slider-wrapper').find('div.cd-svg-cover'),
    svgPath = Snap('#cd-changing-path'),
    path1 = svgCoverLayer.data('step1');

svgPath.animate({'d': path2}, 300, customMinaAnimation, function(){
   //...
});

The easing function is a custom cubic-bezier function; unfortunately this is something wich 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).

Illustrator trick: for this technique to work, you need <path> elements. In Illustrator, if you use only straight lines, a <polygon> element is created. To convert it to a <path>, you can add a border-radius to one of anchor points.

border-radius-trick

Join our newsletter

Get our monthly recap with the latest CodyHouse news