Animating SVGs with Greensock

SVG’s are amazing little creatures. They come in a small package but can do crazy things.

In my last blog post I introduced you to animating SVGs with Greensock. Now I’m going to dig in with some examples. Lets get started. I know you’re busy.

 

Setting up your SVG

Just a few notes on setting up your SVG for animation; make sure your SVG is organized. If you are using a program like Adobe’s Illustrator, be sure you label your layers. These labels will be turned into id’s when your SVG is exported.

Keeping your layers neat and organized will also make it easier to navigate the SVG code when animating.

 

Embedding your SVG

First. You need to decide the best way to embed your svg. There are two ways to do this. You can embed using the <object> tag or you can embed the SVG right into your HTML.

 

Using <object>

Adding your SVG with the <object> tag makes your code cleaner and is recommended if your svg file is large. It takes a couple extra steps in the javascript but nothing you can’t handle.

HTML is simple for this one:

The cool thing about the object tag is that you can load in a backup image just in case your user’s browser doesn’t support SVG.

 

Using <svg>

If you choose to embed your SVG right into your html, copy and paste everything from your .svg file between the <svg></svg> tags.

Just that easy.

 

Accessing your SVG with JS

Using <object>

To access the SVG code in your <object> tag you need to first find the object the SVG is in and then call its contents.

Because getElementsByClassName is made to gather multiple elements it, by default, puts what it finds into an array; even if there is only one. Calling the [0] singles out the first element in the array. In this case, our object.

Now you find the object’s contents.

Once you have the contents you have access to all the ids and classes you added to your SVG.

 

Using <SVG>

Using JS on SVG elements embedded right into your HTML is as simple as getting the elements in the rest of your HTML. No extra code required.

 

Tweening with Greensock

Ok, Now that we have the boring stuff out of the way, let’s start moving things. First, structure.

Start by calling TweenMax then call the method:

Inside the method you have three parts; Element to be moved, How long it should move, How it should move.

 

Element to be moved

The element can be selected in one of two ways: You can store it in a variable:

Or, you can just call the element Id or class from within the Tween:

 

How long it should move

The amount of time it should move in seconds.

 

How it should move

This is where we tell it how to move. There are many ways to do this but I will just cover one.  We are going to move our element to the right using the x/y coordinate system. X is right and left. Y is up and down. Moving up and to the left the numbers go down. Right and down the number goes up.

This moves the element to the right 100px.

You can also rotate, scale, and many other things.

Rotation is by degrees.

Scale is from 1 to 0. 1 being full scale; 0 being nothing. You can also scale with the full ratio or you can single out either scaleX or scaleY.

 

.from / .to

The method I’ve been using is the .to method which goes from the origin to the position that you specify in the tween. There are many methods with TweenMax. Ill touch on just a few of them.

.to : moves from the original location to the location specified in Tween.

.from : moves from the the specified location in Tween to the original location.

.staggerTo : moves a group of elements from the original location to the location specified in the tween with an interval between each element’s movement.

.staggerFrom : like the .staggerTo but from the location indicated in the Tween to the original location.

You can check out the other methods in the documentation.

 

TimelineMax

Timelines use a similar structure. First you need to call your timeline.

Now you can do your animations.

Again, there are many other things you can do with timelines but I’ll let you check out all the possibilities in the TimelineMax documentation.

I’ve created a pen that you can fork and play with. Read the JS and press the buttons to see what they do. Then take the final animation and see what you can do with it. Make it your own. Then send me your results! The more you practice and explore the better you will be.

See the Pen SVG/Greensock Basics by Ryan Leichliter (@LeKohrs) on CodePen.

Feel free to contact me with any questions.