Cool right ? Must be hard to do this... Well it's absolutly not ! We'll see step by step how you can reproduce this with your own illustrations !

Requirements

  • Greensock MorphSVGPlugin (for free on Codepen!) And TweenMax
  • Adobe illustrator ( CC in this tutorial )
  • Some vectors to play with ( We'll use some from www.flaticon.com )
  • Basics knowledge of SVG / JS / HTML / CSS
*Special Note* Hi ! I apologize in advance for my English ! I hope everything is clear enough ! Also if you're wondering why there is an illustrator part in this tutorial, it's because it's a good thing to show that some thing are easier when you master different sets of skills !
Icons made by Icon Pond from www.flaticon.com is licensed by CC 3.0 BY


Download the example assets

If you wonder why we can't morph them right away it's because the MorphSVG function can only morph from a single path to another single path.

Each of the SVG you downloaded has multiple in them. We need to convert them as a single path ! And that's why we will use Adobe illustrator !

With a single path you can't have multiple colors in your svg, we'll only keep the borders.

1) Open your file in Illustrator

AI1

As you can see on the right, there is multiple layers for now.

2) Select the whole object with a click / drag.
3) Remove the fill and set a stroke.
AI2

Here is what you should have now ( notice that you still have multiple layers ) AI3

4) While you select the whole group again press ( Crtl + Shift + G ) to ungroup all path. You should see a change in the layers panel. AI4

5) Now the last step! Merge everything into a single path ! Use Object -> Transparent Path -> Create AI5

Here is what you should see in the layers panel. AI6
We have a single path now !

Just save it as an SVG and repeat this process for each SVG.

Now open all your svg in the same adobe illustrator editor. Adjust them so they have a similar height / width. This way, they'll all fit in the same viewbox and will be easier to animate.
AI6

Export the all thing as SVG and you should have something like this.

It's quite a mess like this ! Let's hide all path but one with !

  svg #pathtuto1,svg #pathtuto2,svg #pathtuto3{
  stroke:red;
  fill:none;
}
svg path#pathtuto2,svg path#pathtuto3{
  display:none;
}

That's better right ?

Now we only need to morph the path to the next one and so on.

That's when it's time to use GSAP ! Load GreenSock TweenMax and their MorphSVG Plugin. Morph SVG link for Codepen (https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js)

Then, you just need to morph the visible path to the next and to the next like this!

  var morphTimeline = new TimelineMax({ 
  repeat:-1,
  repeatDelay:2
}); 

morphTimeline
  .to('#pathtuto1',2,{morphSVG:{shape:"#pathtuto2"}})
  .to('#pathtuto1',2,{morphSVG:{shape:"#pathtuto3"}},"+=2")
  .to('#pathtuto1',2,{morphSVG:{shape:"#pathtuto1"}},"+=2");
;

And that's it !

Now you can add some styles and stuff and you'll get something that may be used as a slider or something.

I hope you learned something! You can see my other pens here You can follow me on twitter if you're intrested in what I do. Also don't hesitate to message me if you need help with this tutorial.

Have a good day !


3,516 6 100