Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196

Unleash Snap.svg to create animated infographics

Take a static graphic and add interactivity and animation to create an exploded-view infographic

Take a static graphic and add interactivity and animation to create an exploded-view infographic


Get the code for this tutorial

In the new responsive web world that designers have to inhabit, sizing graphics is of the utmost importance to us as web designers. Getting crisp graphics on both a phone and on a huge cinema display monitor is not just desirable, but essential. To that end most of us have switched to using SVG images for our icons and line art drawings, which are always crisp on every display. Not only that but the file size is often much smaller than a PNG image. When it comes to creating animated images or interaction with graphically rich content we will need a solution that can help us do this too. Thankfully Snap.svg comes to the rescue because it lets us use crisp SVG graphics but also adds the polish that clients have come to love for their shiny web apps.

In this tutorial we are going to use Snap.svg to create one of those exploded-view images that you would find in Haynes’ car manuals but we’re going to dissect a mobile app. We’ll take a regular SVG created in Illustrator and add animations to this, then make some of the buttons on the interface work. These will drop pins onto a map and slide an off-canvas menu onto the screen. This provides a great introduction into how you can make your own graphically rich applications using Snap.svg.

Start the project

To start off the project, take the tutorial files from FileSilo and open the Start folder in a code editor such as Brackets. In the head section of the index.html page add a link as shown to the Snap.svg library. You can also download the library from for reference.

<script src="js/snap.svg-min.js"></script>

Style the SVG element

Just after the Snap code library has been imported, the CSS styling for the SVG element is set. This is displayed, centred on the page and a background image is placed in there so that all the vector lines and shapes have a background to stand out against.

display: block;
margin: 0 auto;
background-image: url(bg.jpg);

Start up Snap.svg

After the CSS styling in the head section, script tags are added with an onload function that detects if the page has finished loading. Once the page has been loaded up, two variables will be declared. One of these variables will hold a timer that waits a fraction of a second before starting the animation and another variable holds the Snap SVG file.

window.onload = function () {
var timer;
var s = Snap(1280, 800);

Load an SVG file

Before the closing bracket of the onload function in the previous step, add the code shown here. This tells snap to load the scene.svg file. Notice the comment that states the ‘tutorial code goes here’ – this is where the rest of the tutorial code will go. Because once the SVG is loaded, the code between the curly brackets is called.

Snap.load("scene.svg", function(f) {

Reference individual graphics

Once the scene has finished loading up, we will need to do an important part of the tutorial – we need to reference individual graphic elements so that they can be animated or interacted with on the page. Here the variables will reference unique IDs, and these IDs are the ones that you’d find on any regular HTML tag. They will be stored in a variable to be used later on.

var menu ="#menu"),
pin ="#pin"),
chatPin ="#chatPin"),
thumb ="#thumb"),
disc ="#disc"),

More references

Notice that each line of the code shown below has the variable that is then followed by the letter f. If you take a look at Step 4’s code, you will notice that the f included there appears inside the brackets of the function, and all of this code is in that function. The letter f simply stands for file and it is a reference to the SVG file that we had set to load from before.

header ="#header"),
icons ="#icons"),
base ="#base"),
baseText ="#baseText"),

Last graphic references

Here the last references are stored in variables and you may be wondering where exactly these names came from or how they got in the SVG file. When graphics are grouped together in Illustrator, they can be named in the layer panel, these names are applied as IDs when exported into SVG.

map ="#map"),
people ="#peopleBtn"),
chat ="#chatBtn"),
burger ="#burgerBtn");

Display the SVG on the page

The next line of code is quite an important line because this line displays the graphic on the screen. If you remember that s is the Snap reference, then append means to add to that, so we use the reference of f which is the SVG file. Save the page now and hit the ‘live preview’ in Brackets or view the page from a server to see the graphic.


Clean up the graphic

At present there are some pins floating in space and a menu that is obstructing the way of the main graphic. These will be important to us later but for now let’s make them invisible. Place the code here, just before the line we added in Step 8 as this effect should be applied before the image is displayed.

menu.attr({ opacity:0 });
pin.attr({ opacity:0 });
chatPin.attr({ opacity:0 });

Hide ‘hit areas’ of buttons

You can refresh the browser now and see the updates to the graphic from the previous step. There are some hit areas for buttons to hide the button icons, so those will need to be made invisible as well. Add this code that we’ve provided below immediately after the code from the last step.

people.attr({ opacity:0 });
chat.attr({ opacity:0 });
burger.attr({ opacity:0 });

Leave a pause

Once the graphic is on the screen, the animation is ready to be applied but it should wait a little before starting – this is so that the user can see the graphic, then see it as it moves into position. Add the code here after the s.append(f); from Step 8. This code will set a timer to wait for 300 milliseconds.

timer = setTimeout(designIn, 300);
function designIn() {

Animate the graphics

Add the code to finish the function from the previous step. These graphics are animated with a slight bounce to get them into the position we want. The t inside the transform means that they are transformed relatively from their current position. The timing of each is placed after this. Then just hit Save and view it in the browser to see the animation.

thumb.animate( {transform: "t0,-160"},1500, mina.backout );
disc.animate({transform: "t0,-150"},1100, mina.backout);
header.animate({transform: "t0,-130"},850, mina.backout);
icons.animate({transform: "t0,-100"},550, mina.backout);

More animation

The graphics that are at the bottom of the app will also need to be animated, and so does the map in the background. Add the following lines of code before the closing bracket that we showed you in the previous step. Now just save the file and view it in your browser to see all the elements animate into position on the screen.

baseText.animate({transform: "t0,-130"},850, mina.backout);
base.animate({transform: "t0,-100"},550, mina.backout);
map.animate({transform: "t0,-70"},450, mina.backout);

Move the thumb icon

As it stands, the animation stops moving but it would be good if we could make the thumb continuously bob about in the graphic. Go back to the code added in Step 12 and amend the ‘thumb’ code as shown. This will call another function thumbUp when it has finished.

thumb.animate( {transform: "t0,-160"},1600, mina.backout, function(){thumbUp()} );

Move the thumb up

The thumbUp function is added here and it needs to go just below the closing bracket of the designIn function. This ‘thumbUp’ function is called after the thumb has moved into position and it moves it up a little higher with easing so that it slowly builds up speed and then subsequently slows down again.

function thumbUp()

thumb.animate( {transform: "t0,-210"},800, mina.easeinout, function() {thumbDown()} );


Move back again

Once the thumb has moved up, it calls the function thumbDown so now we will add that function below. Again this moves the thumb down and calls the thumbUp function that keeps the thumb bobbing up and down in a loop. Now just save this and view it in the browser, as we have done previously, to see the animation in action.

function thumbDown()

thumb.animate( {transform: "t0,-160"},800, mina.easeinout, function(){thumbUp()} );


Add interactivity

It’s time to make the graphic interactive now. Adding the next set of code will make the icon of the person a button. Clicking on this button will make the pin animate into the graphic and bounce onto the map. The pin was made invisible in Step 9. Save your code and view it in a browser to test the click.

popcorn.cue( 17.2, () {
pin.animate({opacity:1, transform: "t0,280"},900, mina.backout);

Click the chat icon

Similar to the previous step, if the user clicks on the chat icon, the chat pin should drop onto the map and show the location of the chat. The code adds this on-click animation, and once this is done you can save the page and view it in a browser to test that the click is working. () {
chatPin.animate({opacity:1, transform: "t0,280"},900, mina.backout);

Reset the pins

When the user clicks either of the icons and the pins drop into position, they will stay there. It’s possible to only show one at a time by making the first pin animate back off when the other icon is pressed. Just add this line of code to the click function of Step 17 to do exactly that.

chatPin.animate({opacity:0, transform: "t0,0"},900, mina.backin);

Adjust the second pin

As in the previous step, the code here needs adding to the click function in Step 19. This will make the first pin disappear when the other icon has been clicked. This is a simple solution for what we wanted to achieve so save this, then just test this in the browser and only one pin will display at a time.

pin.animate({opacity:0, transform: "t0,0"},900, mina.backin);

Bring in the menu

Right back at the start there was a menu that was made invisible. Now let’s make the burger icon a button that can be clicked and this will bring the off-canvas menu into the app. Add this code below, which will animate this onto the screen. Then save this and try clicking the icon in the browser. () {
menu.animate({opacity:1, transform: "t150,-70"},900, mina.backout);

Remove the menu

To get rid of the menu, it is as easy as letting the user click on the actual menu itself. Adding the following code will animate it back to the original position, while also taking the opacity down and making the menu invisible. Save this and view again in the browser to see and test all the functionality. () {
menu.animate({opacity:0, transform: "t0,0"},900, mina.backin);