Published on | Prototyping: From UX to Front End — Medium Sebastian Martin

Bring life into your designs with this easy approach. Lots of code and examples! Runs in all browsers and takes 1 minutes to set up.

The animated web is here. We have already gotten used to things that spin, pop, slide, fade and change color. Many interactions are animated with the growing cross-browser support of various CSS animations, which are rather easy to understand. But once you have a more complex graphic or need more complex animations, CSS can quickly get tedious.

SVG to the rescue!

SVG animations are stepping in to help you get small animations done quickly. They scale quite well and have several advantages: SVG images are tiny and there are a number of animation libraries which work in Javascript — making it easy to integrate them in your workflow. For this article, I’ve used the GreenSock Animation Platform. I like its syntax, it is easy to set up and get result.

As an aside: I feel that there is still a gap between animation via code and animating via vision. The former requires you to write directly what you want elements to do. Animating visually, such as can be done in Adobe Photoshop and After Effects, is easier to build, but lacks good export functionality. There are some plugins that will translate from After Effects to code, but the output is hardly usable for further production. If you know any tools that allow you to animate on a canvas and produce clean, readable code, let me know.

The first project: Hello Cube

Back to SVG. As you might know, SVG are scalable vector graphics, which means that they don’t rely on pixels, but on vectors and points. While raster images will define the exact color of each pixel, vector images put points on a canvas and specify how they connect (stroke) and how they should be filled (fill). The points are relative to a coordinate system in each SVG image. They are resolution independent — each canvas can be as big or small as you wish. The points will always be on their respective positions, and stroke and fill will be generated automatically.

Let’s look at the simplest example, a rectangle. I used Adobe Illustrator to make this simple graphic. The canvas size is 512×512 pixel (in AI), the rectangle is 256×256 centered on the canvas. I gave it a fill (#e6e6e6).

512×512 pixels.

I save this file via File — Save — Choose SVG as file format and the following settings.

The easiest settings for SVG files.

You can open the SVG-file we just created in the browser and see it there.

Let’s take a look under the hood. Open the SVG-file in a code editor of your choice. Modern choices include Visual Studio Code, Atom or Notepad++.

Here is the SVG-Code that came out of Illustrator.

<a href="https://medium.com/media/ee7fba05fd0a2c4018aa04718be90c4d/href">https://medium.com/media/ee7fba05fd0a2c4018aa04718be90c4d/href</a>

We have different properties that correspond to the things we did in Illustrator. The rectangle is defined by the tag <rect>. It has a starting point of x and y at 128. That’s the upper left corner. From this starting point, the <rect> is defined with a width and a height of 256.

The dimension of the rectangle. The code fits perfectly!

As you see, it’s not set in pixel, which means that all points are relative to the size of the SVG-element (set by the width and height in the <svg> tag). If you check the “responsive” flag while saving from Illustrator, the width and height of the SVG-element will be omitted and it will expand until it fills its container.

In the code, you can also see that there is a <style> tag and it contains the style st0 with the color that we set in AI. The actual element then uses that style as a class attribute. Setting and using styles should look familiar from CSS.

In the code, you can see a <g>-Tag, which responds to a group. Groups are used to structure graphics and we’ll later see how we can use this to animate them.

I’m setting up the first animation with Greensock Animation Library. It consists of three elements: an HTML-file as a container, the SVG-code and the Javascript code that runs the actual animation.

Here is the boilerplate code:

<a href="https://medium.com/media/0bb8eb4115fcdd8b56a231bc29e4ff3e/href">https://medium.com/media/0bb8eb4115fcdd8b56a231bc29e4ff3e/href</a>

We’re loading the Greensock library via its handy CDN, so we don’t actually need to download anything.

Inside of the <body>, there is a single <div> and inside of it, we’ll paste the SVG code. Use only the code from <svg…> until </svg>. You can ignore the first two lines.

<a href="https://medium.com/media/8cbdc28b42762637a0c2c68dd65dff52/href">https://medium.com/media/8cbdc28b42762637a0c2c68dd65dff52/href</a>

You can check out that everything is fine by opening this HTML in your browser.

Now let’s get animating. To animate, we need to first grab the element from the SVG. Then, we’ll add a new animation to the Greensock property of “TimelineLite” and “Tweenlite”, and finally, we’ll start the animation.

In order to be able to adress the correct element, we need to give our rectangle a name. For now, we’ll do this in the code, but later we’ll add this in Illustrator.

Inside of the SVG-element, look for the <g> tag and inside, add

<g id=”rectangle”>

Then, between the </div> and the </body>, add a Javascript tag:

<script type=”text/javascript”>
</script>

Inside of this script, type

let rectangle = document.getElementById('rectangle');

Now Javascript can use the rectangle variable to address the correct element.

Greensock TweenMax supplies us with the basics of making complex animations right from the start. We’ll see later how useful this is.

The power of this approach is that we create a virtual “timeline”, like something you see in After Effects. It contains several “tracks” on which we place the actual animation. Later, it’s possible to name points on a timeline and even use more than one timeline.

To start the timeline, inside of Javascript, we’ll simply type

let tl = new TimelineLite({
  paused: true
});

With this, we inserted a new timeline, and you can see that it’s paused as well. It’s another analogy to the way video editing works: the playhead is paused at the beginning, no animation will play just yet.

To this timeline, we’ll now add the new animation with this code. We want to make the rectangle move!

As an example, we want to move it to the right side and it should take 5 seconds.

We are adding a new TweenLite to the timeline tl with tl.add. This takes two arguments inside: what do add and at what time to add it.

tl.add(What to add, when to add);

We want to add a new TweenLite and it should start right away, at 0 seconds:

tl.add(TweenLite, 0);

(Instead of starting at 0 seconds, we can later give it offset and names to start from.) Now, we want to specify the TweenLite-command. It needs to know what exactly is being animated. We want to go from the current status to a different end status, that’s why we use TweenLite.to. Other possibilities include TweenLite.from and TweenLite.fromTo

TweenLite.to takes three arguments: what element is should animate, how long the animation takes and how the element should look at the end:

tl.add(TweenLite.to(element, duration, animation), 0);

Element: that’s our rectangle from before. We assigned it to the variable of “rectangle”, so we can put that in here.

Duration: the duration of the animation in seconds. It also takes fractions of a second.

We said the animation should take 5 seconds.

tl.add(TweenLite.to(rectangle, 5, animation), 0);

The animation we need to specify can be more complex.

Location

We’ll start with something very easy and set the animation to a movement of 128 units to the right. This is done inside the animation object and inside curly braces. Moving to the right in SVG is giving a positive x value.

{x: 128}

Now, the whole line looks like this:

tl.add(TweenLite.to(rectangle, 5, {x: 128}), 0);

Before we go any further, let’s get that animation on the road. Add the code below after the statement you wrote to start the animation with this:

setTimeout(function(){
  tl.play();
}, 100);

Save the file and open it in your browser. If everything is correct, the rectangle should be moving to the right!

<a href="https://medium.com/media/308e8ab05cc82b2a0d9ef8ab74ada524/href">https://medium.com/media/308e8ab05cc82b2a0d9ef8ab74ada524/href</a>

You might notice that the movement isn’t linear, it seems to start and end slow. This effect is known as easing and it’s often used to give elements a more natural feel. Almost nothing in the real world really moves linearly, instead things take time to accelerate and to slow down.

TweenLite in Greensock has a default easing property that will be applied everywhere, unless you disable it or override it.

For the next example, let’s use easing to make the box bounce.

To make the code a little bit more readable, we’ll specify the animation in a separate variable.

Before tl.add(…), write

let animation = {};

Inside of tl.add, replace the curly braces with the variable name of “animation”:

tl.add(TweenLite.to(rectangle, 5, animation), 0);

Inside of the animation object (the one with let animation = {}), we can write our animation properties on line separated by commas. In the first example, there was just one line: x: 128. If we want the cube to fall, we’ll have to move it in the y-direction, so we can write:

let animation = {
  y: 128,
};

And to add the easing, we write:

let animation = {
  y: 128,
  ease: Bounce.easeOut,
};

Make sure to set a comma after “128”.

You can see all the easing options with the handy visualizer from GreenSock.

Save the file and you can see that the box will fall and bounce! It seems to be quite slow and that is because we set the animation time to 5 seconds. Change the value to 1 and the box will fall and bounce much more realistically.

tl.add(TweenLite.to(rectangle, 1, animation), 0);

This looks pretty cool already. All we have done so far is to animate the location of the box with x and y coordinates.

Scale

What else could we animate? Let’s try size next. This is done with the scale-property.

Instead of setting “y: 128” on the animation, let’s set “scale: 1.5”. You can also slow down the animation again by increasing the duration back to 5. The rectangle will now grow in size — and because we have the “ease” function on our animation, it will also bounce back before it reaches the new size.

let animation = {
  scale: 1.5,
  ease: Bounce.easeOut,
};

If you only want to scale it in one direction, use scaleX (horizontally) and scaleY (vertically). For instance, to make the object twice as wide, set scaleX: 2 as the only animation property.

let animation = {
  scaleX: 2,
  ease: Bounce.easeOut,
};

Currently, the object will scale from the top left corner, because its origin is there at 128, 128. In order to scale it from its center, we need to move the animation origin (not the object origin) inside of the animation property. That’s actually rather easy. Below ease, add a new line.

let animation = {
  scaleX: 2,
  ease: Bounce.easeOut,
  transformOrigin: "50% 50%",
};

This code will move the origin of any transformation (scale, location, rotation) to 50% of its width and height — which is the exact center of the SVG group.

Remember that we are animating a whole group, because we are getting the “rectangle” ID from the SVG code. TransformOrigin will move the center of the animation to 50% width and height of the whole group. If you have other objects in there, they might increase the width and height of the group and the animation will not be centered. In the transformOrigin property, you can also set absolute values (instead of percentage).

Try transformOrigin: 50, 50. The center of the scale will move 50 units to the right and 50 units down.

Rotation

You might want to have the object rotate. It’s easy, just set a rotation-animation like this: rotation: 360. This takes rotation in degrees, 360 is one full rotation.

let animation = {
  rotation: 360,
  ease: Bounce.easeOut,
  transformOrigin: "50% 50%",
};

Opacity

The last useful property is opacity, which controls the visibility of the object. Setting it to 0 will make the object disappear. Try setting opacity: 0 and see how the objects fades away.

let animation = {
  opacity: 0,
  ease: Bounce.easeOut,
  transformOrigin: "50% 50%",
};

I find that location, scale, rotation and opacity will cover just about all things that need to be animated. To combine those effects, you can set them at the same animation.

let animation = {
  scale: 1.5,
  rotation: 360,
  opacity: 0,
  ease: Bounce.easeOut,
  transformOrigin: "50% 50%"
}

As we using this animation inside of the TweenLite.to command, the transformations will all play at the same time, with the same duration and the same ease.

More animations

The next we want to do is making animations happen one after the other. We are doing this by adding new tracks to our timeline. Remember, the timeline is the container and we are adding animations into it.

We are doing this with a simple line of new code:

tl.add(TweenLite.to(), when).

We want to start this animation as soon as the first one is over. How do we know it’s over? We can look at the duration of the first one: 5 seconds.

tl.add(TweenLite.to(), 5);

Then, we’ll specify what happens in the tween: the element is still rectangle, the duration can be maybe 3 seconds and the animation that’s happening is a new animation that we’ll call ani2.

Here is the full code:

<a href="https://medium.com/media/184f34219fb9677ca98ebd0f034ea774/href">https://medium.com/media/184f34219fb9677ca98ebd0f034ea774/href</a>

Awesome, things are now happening one after the other. First, ani1 makes the rectangle move to the right for 5 seconds. After 5 seconds, ani2 will rotate the element for 180 degrees, taking 3 seconds.

Timeline

The timeline is a great tool and we will use it now to animate multiple objects in a more complicated manner.

To kick things off, we’ll head back to Illustrator, where I build a new SVG file. Get the file here.

A more complex scene

Right now, in Illustrator, everything is one same layer. I want to animate the clouds (one and two) and the car. The background, the grass and the sun will be static. To organize this, we’ll put all non-animated objects on the lowest layer and call it “background”. Then “car” will be on one layer, as well as “cloud1” and “cloud2”. Here is how this looks.

Illustrator layers

Save the file with the same settings as the first one and open it in the editor. Now there will be much more going on! But not to worry, everything is grouped. You will see that there are multiple <g> tags inside of the SVG code and each one has the same id as the layer name from AI. Very useful! You can close the <g> tags with the little minus symbol right next to it.

The same image as code

Copy the code over to your HTML document and open it in the browser to check if your image is there as well. (By the way, the HTLM file is less than 10kB and it contains the image and the animation! The library we load is about 40kB. By comparison, JPEG images easily have multiple 100kBs).

Animating the clouds

Let’s see how we can animate the clouds first. We start with the basic animation code.

Grab the cloud from the document with

let cloud1 = document.getElementById("cloud1");

Add the TweenLite to the timeline:

tl.add(TweenLite.to(cloud1, 5, ani1), 0);

And define the animation ani1:

let ani1 = {
  x: 512,
}

If you take a look at the cloud, it will fly right off the image, because we have told it to move 512 units to the right (positive x). But it will start where we put it in Illustrator.

Inside of the code, we can specify a new starting point. Go up into the SVG code and change

<g id=”cloud1">

to

<g id="cloud1" transform="translate: -512 0">

This will set the initial position of the cloud 512 units to the left. When the animation kicks in, it will move to the right 512 units within 5 seconds! Because clouds are not accelerating, we will disable the easing function and giving it a little more time.

Disable the default easing by adding

TweenLite.defaultEase = Linear.easeNone;

to the code.

Then, we’ll give the cloud some more time to move by setting the duration to 15 seconds:

tl.add(TweenLite.to(cloud1, 15, ani1), 0);

Do the same for the second cloud: grab it from the document, add a new TweenMax to the timeline. Change the starting point of “cloud2” inside of the <g> tag the same way as with “cloud1”. You can use the same animation (ani1) for the movement. If you change the duration, the clouds will move with different speed. For instance, in this code

tl.add(TweenLite.to(cloud1, 15, ani1), 0);
tl.add(TweenLite.to(cloud2, 10, ani1), 0);

Cloud1 will move slower, because it needs to complete the movement in 15 seconds, whereas Cloud2 only has 10 seconds for the same distance.

Animating the car

Clouds are moving, let’s move the car. I want it to come in from the right, slow down, stop and drive on.

For it to come it, let’s use a new method: instead of setting TweenLite.to, we use TweenLite.from.

This means that the information we give in the animation object are the starting point, not the target. Until now, we have used to as a target — start at the current place and go to the new place. TweenLite.from does the opposite: you specifiy the start and it will move to the current position.

Animate the car like this: grab it from the document via

let car = document.getElementById(“car”);

Add it to the timeline with

tl.add(TweenLite.from(car, 3, ani2), 0);

And specifiy the animation

let ani2 = {
  x: 512,
}

But now the car is moving linearly (we have removed the easing earlier) and that looks weird. Add a new ease into ani2:

let ani2 = {
  x: 512,
  ease: Power4.easeOut,
}

I used the Easing Visualizer to choose one easing function. The car stops like it’s actually doing a braking motion! We will wait for some seconds until it should move again. By now, you know how this works: adding a new animation to the timeline.

tl.add(TweenLite.to(car, 3, ani3), 5);

And the animation is doing this:

let ani3 = {
  x: -512,
  ease: Power4.easeIn,
}

X is negative (moving to the left) and the easing now has a easeIn function, which means that is starts slowly and accelerates.

Cool. Two more things in this scene, before we look at the final example.

As I have mentioned before, you can also add labels to the timeline if you need to organize your animations. This is simply done by adding a label to the timeline (instead of a TweenLite like we used to do). This is as easys as writing a name and a time, like this:

tl.add("startCar", 5);

We can then reference this point in our animations:

tl.add(TweenLite.to(car, 3, ani3), "startCar");

The points need to be inserted before you reference it, otherwise the code doesn’t know when to start the animation.

The second problem we have right now is that the animation stops after running once. We are starting it with the function tl.play inside of the setTimeout-function, but that will only be executed once. Fortunately, we can set a function that will reset everything. We change the TimelineLite code to this:

var tl = new TimelineLite({
  paused:true,
  onComplete: () => {
    setTimeout(() => {
      tl.restart();
    });
  }
});

In the beginning, it’s paused until we trigger tl.play once. Then, when it’s completed, we want to restart it automatically. And that happens when we use the code now!

By the way, if you look back at the SVG code, you’ll see that the car group contains many different styles and objects. This is no problem, because we are simply addressing the whole group with our transformations. It’s important to prepare the file in Illustrator correctly by labeling the layers.

This is the final code.

<a href="https://medium.com/media/73778ba675240c00383416c464ae1a9d/href">https://medium.com/media/73778ba675240c00383416c464ae1a9d/href</a>

Phew, we’ve been animating like crazy!

Masks for awesome effects

One last example that will also use a cool trick: masking objects. For this, we’ll do a clock. We want to animate a clock with a red hand and a little shadow. We’ll use clip groups to achieve this.

Tick, tock, SVG clock.

The clock consists of three parts: the background, the hand (in red) and the shadow. The shadow should be visible between 12 o’clock and the hand. We do this by building a clip group.

First, we take a full circle. It sits on its own layer between the background and the hand.

The next steps are as follows:

Create a rectangle that covers the left half of the circle. Copy it with Ctrl+C.

Select the light-grey circle (the shadow) and the rectangle together. In the path finder, press Minus Front.

This will cut the circle in half.

Paste the same rectangle in place with Ctrl+F. Select it and the half-circle you just made and right click to “Make Clipping Mask” (shortcut Ctrl+7).

If everything is correct, both forms will disappear! The rectangle is the mask for the half-circle. The half-circle itself is now outside of the mask, so it’s not visible. We’ll make it visible later. In the Illustrator layers, it should look smilar to this:

A path and a rectangle inside of the clip group.

Save the file as SVG and we’ll take a look at what happened in the code!

If all your layers are named correctly, this is the structure of the file:

Ignore the group named scroll.

And inside of the “shadow” group, there is the clipping group. You can recognize it by the <clipPath> definition.

Now to the fun. We know that there is a half-circle on the right side of the clock. We also know that the mask is a rectangle on the left side.

By rotating the clipping path around the middle of the clock, we will reveal the half-circle below.

Like this:

When the mask is rotating, the semi-circle is revealed!

To do this, we need to grab the rectangle called “SVGID_1_” from the code — this is the rectangular clipping path. Inside of our Javascript, we write:

let shadow = document.getElementById(“SVGID_1_”);

We add an animation to the timeline like this

tl.add(TweenLite.to(shadow, 30, ani1), 0);

and finally, we define the animation ani1 like this:

let ani1 = {
  rotation: 180,
  transformOrigin: "100% 50%",
};

We want the masking rectangle to rotate 180 degrees. The center of the rotation is set to the 100% (over to the right side) and 50% (down half the size). This means that it will rotate around the center of the clock in the background.

Eventually, we’ll also animate the hands.

Setting up the three things, we have:

let hands = document.getElementById(“hands”);

tl.add(TweenLite(hands, 30, ani2), 0)

let ani2 = {
  rotation: 180,
}

But with this, the hands will rotate around the wrong origin. We need to adjust this one as well. The x-Origin needs to be moved to the center of the hand. The y-origin needs to move down. Measure the distance in Illustrator and divide it by the total length. In my case, this is 128px/ 82px = 0.67. The y-origin needs to be at 67% of the total heigth.

We set those values as the transformOrigin property in ani2:

let ani2 = {
rotation: 180,
transformOrigin: "50% 67%",
}

And when you save the document, the hand and the shadow will move correctly.

<a href="https://medium.com/media/1b3953dd3a8ff9618dfbe17ebb480997/href">https://medium.com/media/1b3953dd3a8ff9618dfbe17ebb480997/href</a>

Awesome!

Conclusion

In this article, we’ve started to get the basics of animation in SVG down. We started with a simple Illustrator file, loaded the SVG code into an HTML document.

With Javascript, we could access the elements inside the SVG code.

Using a timeline as a container, we added animations with the TweenLite property. With this, you can change the position, rotation, opacity and scale of the SVG contents. Make sure that you put the things you want to animate on the right layers, in the code they will also have the right names.

Check out these resources as well.

GSAP Main Page

Ease Visualizer

GSAP learning: Understanding the Timeline

Cheatsheet with all information on how to animate (pdf)

Let me know what you animated and how it went! Would you like more articles on this topic and more in-depth examples? Write to me.

As always, thanks for reading. Consider click the clap-button so others will also find the article.

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

From Zero to Hero — hands-on projects to animate SVGs with Greensock Animation Platform was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

From Zero to Hero — hands-on projects to animate SVGs with Greensock Animation Platform

Cool stuff, every week

More Articles