animated-svg-hero-slider
August 17, 2015 | 38 Feedbacks

Animated SVG Hero Slider

A full page slider, with animated SVG elements used as transition effects.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

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.

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

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:

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

Changelog

Aug 17, 2015
  • 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.

  • Sano Sempati

    love it :D

  • Jerz Obille

    awesome!

  • Peregrine Web

    Very nice.

  • Andalee M

    Great article & freebie. Thank you! I’ll share on my twitter: @andaleem

  • Karlon Cromwell

    Nice work! Need to learn more!

  • Alex McCabe

    That Honda website, although looks nice, is god awful for usability. I had no idea what was going on. I was scrolling and content was changing, but it wasn’t easily visible. The whole site was also flickering every time I scrolled.

  • yondonjamts

    what does the cd prefix in classes stand for?

    • http://codyhouse.co Claudia Romano

      It’s a prefix we use to make sure class names are unique (stands for CoDyhouse). You can remove it if there are no conflicts with your own css.

  • Mahendran

    Nice Tutorial… Simple and Clean

  • http://loayyoussef.com/ Loay Youssef

    Amazing!

  • http://www.williancosta.com.br/ KaosNihil

    Very nice!

  • Munnooo

    I Dont know how to Say you Thanks alot :D

  • sastry gunnu

    Awesome Romano Really Nice one.

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

    This looks nice, but I guess that you need to speed-up overall transition, because right now it’s kinda eats too much times, leaving users with 0 content to look at during animation.

    • http://codyhouse.co Claudia Romano

      Hi Nikolay, thanks for the feedback. The main chore of the article is to show how to animate svg paths starting from shapes created in Illustrator. You can then change the transition according to your website content and needs (eg if you load your new content with Ajax, you can replace the loading bar with this animation).

  • danny

    can this be used in wordpress

  • tebrown

    How would you integrate this transition for pages? Meaning each Item #1, #2, #3, #4 would act as pages.

  • http://eduardo.dantascorreia.com.br/ Eduardo Dantas Correia

    Hello , you can mix three styles from this library and make them become perfect? I wish I could use these in one : content -filter , quick- add-to -cart and side- shopping -cart , but one ends up changing each other, thanks!

  • alejo

    hello, its possible to add two arrows like “prev” and “next”? or turn the slider into automatic? thanks

  • vagiag

    Hello and well done! It’s very cool transition effect! I’ve tried to play a bit with it and everything worked fine in my local disk, but when I’ve uploaded the files in my server there was no transition. I can go from Item #1 to Item#2 etc. Any ideas for what may be the problem? I can’t think any reason for that.

    Thanks in advance!
    P.S: I’ve also tried to upload the original files to my server, but still didn’t worked.

    • vagiag

      I actually worked this out! It had nothing to do with the code, but with the permissions on my server! Thanks!

  • http://dev4dollars.com/jaimewilliams Jaime Williams

    Love the slider and the sass integration, nicely done! I understand that this question might be a bit out of scope but figured asking here might be a good place to start. I modified the background content so that I could put Coverr videos instead of the different colored background images for the li’s. It works pretty well in chrome, Firefox, and Opera but does not fare so well with Internet Explorer or Edge When IE/Edge sees the second and consecutive slider segments it appears to be presenting all the overlay elements on the slides 2, 3 and 4. Also why I navigate back to the home slide all the overlay elements are still presenting incorrectly. Any Idea why this would happen? Here is a link to the dev site http://jaime5x5.com/btslanding. Any input will be greatly appreciated.

  • http://fromfilmerstofarmers.com Allan Stromfeldt Christensen

    Hello! This slider is great, thanks!

    I’m a total newbie to this stuff, but was able to manipulate it all so that a fifth page and circle/link was incorporated. Problem is, not only is the fifth circle blank, but I can’t figure out how to put an image in there, let alone duplicate one of the other images into the fifth circle. I gather that it’s done with SVG, but I see no SVG files. I do however see what I presume to be “SVG code” (?). Can anybody give me a hand with what to do here, or perhaps just leave a link to a page explaining what to do? I have Inkscape, but not Adobe Illustrator, if that’s of any consequence.

    (As an aside, I do have a tiny SVG of a plum that I wouldn’t mind incorporating into one of the circles).

    Thanks in advance!

  • http://fromfilmerstofarmers.com Allan Stromfeldt Christensen

    Hello, and thanks for this fantastic slider Claudia!

    Although I’m a newbie to this stuff, I’ve adapted the slider a bit to add a fifth page (and I intend to add more once I’ve got the kinks out), and I’ve got most everything figured out. The last stumbling block I’m coming upon is getting a fifth SVG image inserted properly. I’ve changed the width, viewbox and enable-background in the cd-icon-navigation.svg file from 240px to 300px. When I place my new SVG in the fifth position (making sure its translate/transform parameters are set to 262 pixels), it drops in fine. But when I move it over to the second of fifth spot, and adjust all the translate/transform parameters accordingly, the first SVG moves to the right to overlap the second, and sometimes in my trial and erroring, the fifth moves in to overlap the fourth. When I play around more, other weird things happen, and I can’t make out any pattern that might help me understand what’s going wrong. Can anybody offer any ideas, or possibly point out a tiny piece of code that I’ve missed out on adjusting? Thanks in advance!

  • Hai Duong

    Awesome work and tutorial here! I pre-enrolled your course. Can’t wait to learn :D

  • Kazuhiko sama

    Simply awesome, i hope to learn a lot from your tutorials, i loved this slider.

  • http://ladesigns.co.uk Sean Lee-Amies

    Anyone else had any luck adding this to WordPress? I’m giving it a go now… Head is already starting to hurt :D

  • http://ladesigns.co.uk Sean Lee-Amies

    One more question… How would I make it so that instead of starting on slide one, I can choose a different slide to be displayed on page load?

    • http://codyhouse.co Claudia Romano

      Hi there, you should add the ‘visible’ class to the slide you want to show as first slide (and the ‘selected’ class to the corresponding .cd-slider-navigation list item). Hope this helps!

      • http://ladesigns.co.uk Sean Lee-Amies

        Hi Claudia,

        Thanks for that – bizarre as I assumed that’s how it worked initially and tried it, but it just kept displaying the first slide… I must have missed something. Cheers :)

      • http://realestateradioshow.com Greg Welch

        Hi Claudia, I am using you slider above but was interested in a bit of code to have it load a random slide on page refresh. current implementation is at https://stepbystep3d.com

  • Chenguy Ung

    how can i have an animation style like this one ?
    https://codyhouse.co/demo/animated-svg-image-slider/curve.html

  • http://webinti.com Agence Webinti

    Hi, I’d love to have the autoplay function, i saw the hero slider and tried to put the .autoplay class on ul.cd-slider, and did not work, how can i make it work please ? Thanks for the nice job!

  • Death667b

    Has anyone got auto play working ?

  • Nana Ampaw

    I can’t seem to get the SVG Hero Slider to autoplay, can anyone here help

  • Павел Тарасов

    Hello, i add 2 more buttons , but i dont understand – how to add slides for them?