Animating a More Advanced Icon with Snap.svg

How great would it be if we could animate an SVG graphic and implement it for web use? In this tutorial, we’ll be doing just that. Let’s go over how to create a relatively simple icon in Inkscape and apply some neat animations using Snap.svg.

The Final Result

1. Draw an Icon

Step 1

Let’s start by drawing two squares and convert the white one with Path > Object to Path.

Step 2

Just for fun, let’s add a small drop shadow with Filters > Shadows and Glows > Drop Shadow.

Step 3

Of course, we’ll want to assign an ID and Label with Object > Object Properties.

Step 4

This may seem strange, but let’s draw a rectangle that is 50% of the icon’s height and 100% wide, then remove any fill or stroke. We’ll be using this invisible rectangle as an activator for the upcoming animation. Also, assign an ID/Label to this rectangle as well.

Step 5

Let’s repeat the same thing, but for the bottom 50% of the icon.

Step 6

When you’re done, head up to File > Save As and change the type to Plain SVG.

2. Animating the Icon

With Snap.svg, we’ll be using a combination of HTML, CSS, Javascript/jQuery to create the animation. For this part of the tutorial, I’ll just lay down all of the code and explain it a bit.

icon.svg

First, open the SVG file in a text/code editor and look for rectWhite. When you do, copy the d value as we’ll be needing this for the actual animating.

icon.js

Let’s go over the most complicated – the Javascript. First, we just refer to the SVG file we made earlier, and add the IDs for the shapes.

1

2

3

4

5

6

window.onload=function(){

vars=Snap("#iconDiv");

Snap.load("svg/icon.svg",function(f){

rectWhite=f.select("#rectWhite");

rectTop=f.select("#rectTop");

rectBottom=f.select("#rectBottom");

Below is the actual animation script. This is where we need that d value earlier, because those are the actual node positions for rectWhite. When the top of the icon is hovered (rectTop), I change the 3rd node from 150,150 to 80,80 which turns the square into an arrow shape. I also ran a transform to rotate by 45 degrees around its center point. When the top of the icon is not hovered, it simply returns to the original values.

And now it’s time to add some actual functionality to this icon. When the top or bottom is clicked, it scrolls accordingly with a smooth jQuery animation. I’ve also made it so that rectWhite changes to a gray fill when it’s being clicked.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

rectTop.mousedown(function(){

vary=$(window).scrollTop();

$("html, body").animate({scrollTop:y-$(window).height()},400);

rectWhite.animate({fill:'#ccc'},50,mina.easein);

});

rectTop.mouseup(function(){

rectWhite.animate({fill:'#fff'},50,mina.easein);

});

rectBottom.mousedown(function(){

vary=$(window).scrollTop();

$("html, body").animate({scrollTop:y+$(window).height()},400);

rectWhite.animate({fill:'#ccc'},50,mina.easein);

});

rectBottom.mouseup(function(){

rectWhite.animate({fill:'#fff'},50,mina.easein);

});

s.append(f);

});

};

style.css

Here’s a little styling for later on. Oh yeah, I added a little CSS box shadow to the icon DIV holder.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

body

{

margin:0;

height:1000px;

}

#iconDiv

{

position:fixed;

top:50%;

margin-top:-100px;

z-index:1;

height:200px;

width:200px;

box-shadow:2px2px10pxrgba(0,0,0,0.5);

}

.block

{

position:relative;

top:0px;

left:0px;

height:200px;

width:400px;

}

index.html

To wrap it all up, we’ll need the HTML. I start by importing my CSS stylesheet (style.css), animation script (icon.js), Snap.svg API (snap.svg-min.js), and the jQuery script. Finally, I’ve added the iconDiv in which to have the icon appended to, along with a few DIVs for some content to scroll through.

Run the Code!

All that’s left to do is upload everything accordingly and run the index.html. Below is the final result, and it really does look engaging.

We’re Done!

Whew, that was a lot to take in! By using Inkscape to design a simple icon, we were able to use Snap.svg to create an animated icon that actually does something useful. You can also get super fancy and create a working clock using Snap.svg. Thanks for reading!

Hello, Aaron,
Thanks for your tutorials. I do need some guidance.
Would you please direct me to a source of basic information that will help me find where to insert the HTML, CSS, and Javascript/jQuery code? I’m a newbie, and going from your basic tutorial to this one is a huge leap.
Thanks for writing!

Hey John, I’ve been looking at this for a while now. I finally figured out that when I rotate an object, the “M” and “Z” turn to capitals. I must’ve rotated at one point to find the new transformation coordinates and that probably changed the format. Oops! I hope this sheds some insight on this. Thanks for reading!