News

Use jQuery to create SVG line animations

Ultranoir creative Developer Nathan Gordon explains how adding a clipping mask to SVG line animations formed the Looney Tunes-style opener on Over The Hills

SVGUltranoirHilss

SVGUltranoirHilss

GET THE CODE

Plotting the SVG shape

We start by creating the mask shape, visible when the animation is complete. Illustrator was used here but any vector-based drawing suite should suffice. Before exporting your mask, it’s advisable to merge all the pieces into one path. To do this use the Boolean operations in the pathfinder or if the parts are separate create a compound path (Object menu). Draw your paths over the top, giving them a stroke-width sufficient to cover the mask. These are the lines to be animated, visible only within the bounds of the mask to produce the illusion that the mask itself is animating.

Separate lines and masks

Our pictured example used eight separate paths, ensuring the lines did not reveal parts of the mask they shouldn’t and ruin the illusion. If this proves a problem with your own designs, perhaps split the animation into even more lines or try several separate masks each with their own lines. You need to be a bit clever with your placement to get it working perfectly!

Identifying the Paths

Once happy with the paths and mask, export them as SVG code. We’ve provided a simpler example than the one for The Dead Pirates, but inspect closely and you will see one path with quite a bit of data. then two smaller paths with a stroke applied. The first will become the mask, and the others will be animated.

Defining the Paths

Inside the SVG we add a <defs> tag and a <clipPath> tag with an id of “myClip”, wrapping them around the mask path. Once comfortably wrapped, the mask path will be invisible. Then we add a ‘clip-path’ attribute to the animation paths, with a value of ‘url(#myClip)’, linking them to the clip path with the ID we just created. You can now place this code directly in your HTML:

001 <svg version=”1.1” xmlns=” HYPERLINK “http://www.w3.org/2000/svg” http://
www.w3.org/2000/svg” x=”0px” y=”0px” 
width=”100px” height=”100px” viewBox=”0 0 100 100”>
002 <defs>
003 <clipPath id=”myClip”>
004 <path d=”M48.28,7.333v82.838c0,1.381-
1.117,2.496-2.495,2.496H14.762c-
1.379,0-2.499-1.115-2.499-2.496V7.33
3H25.64v72.029h9.268V7.333H48.28
z M65.1,92.667V20.64h9.265v72.027h13
.374V9.83c0-1.379-1.117-2.497-2.497-
2.497H54.219c-1.379,0-2.497,1.118-
2.497,2.497v82.837H65.1z”/>
005 </clipPath>
006 </defs>
007 <path clip-path=”url(#myClip)” 
fill=”none” stroke=”#000000” 
stroke-width=”20” d=”M18.5,7c0,
0,0,68.5,0,75.5s22.75,7,22.75,
0C41.417,56.5,41.301,7,41.301,7”/>
008 <path clip-path=”url(#myClip)” 
fill=”none” stroke=”#000000” stroke-
width=”20” d=”M81.5,93c0,0,0-
68.5,0-75.5s-22.91-7- 22.91,0”/></svg>

TweenMax and jQuery

The animation uses Greensock TweenMax library alongside jQuery, plus a clever CSS trick popularised by Chris Coyier (http://css-tricks.com/svg-line-animation-works). Here only the path’s ‘stroke-dashoffset’ needs to be animated in order to achieve the illusion of a line being drawn. Recommended reading if you haven’t already!

001 <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.
js”></script>
002 <script src=”http://cdnjs.
cloudflare.com/ajax/libs/gsap/1.13.1/
TweenMax.min.js”></script>

Animating with JavaScript

Firstly on our actual code, we store a reference to our paths excluding our clip path. Then for each path, we set the ‘stroke-dasharray’ and ‘stroke-dashoffset’ equal to the path’s total length, hence rendering it invisible. Each separate path animation is then added to the timeline, animating the ‘stroke-dashoffset’ to zero. The duration, delay and easing parameters can then be tweaked as desired.

001 <script>
$(document).ready(function() {
002 var paths = $(‘path:not(defs path)’);
paths.each(function(i, e) {
003 e.getTotalLength();
004 });
005 var tl = new TimelineMax();
006 tl.add([
007 TweenLite.to(paths.eq(0), 1, 
{strokeDashoffset: 0, delay: 0.0}),
008 TweenLite.to(paths.eq(1), 1, 
{strokeDashoffset: 0, delay: 0.5}),
009 ]);
010 })
011 </script>
×