08 September 15 -

SVG animation with GreenSock.

I’m pretty excited about the GreenSock Animation Platform (GSAP), which is why I wanted to write this article.

GSAP brings vector images to life using scalable vector graphic (SVG) animations. You can animate a scene, develop HTML5 banner ads, improve project interfaces – the options are endless. My aim is to give you an introduction to GreenSock, the benefits of the platform and how to use it effectively.

To help illustrate how the platform works, I’ve embedded the development of an animation so you can see how we built it. I’ll then show you what the finished element turned out like. I’ve kept it basic on purpose but have provided links to further resources and information if you’re interested.

While you can use GSAP to animate any type of element, my focus is on using it with SVG images as there’s potential to create some awesome animations.

But first, a quick word on SVG images…

If you are unfamiliar with how SVG images and their properties, these two resources will help:

  • Jakob Jenkov has put together a great series of tutorials on his website. He is great at explaining SVG properties and including demos on how to use them.
  • Sara Soueidan writes in-depth articles on SVG for her website, making it easy to understand how it all works. She dives into the properties and provides great reference images.

On to Greensock.

Previously, you might’ve used Flash to animate for the web. But as support for Flash continues to die due to security flaws and lack of browser support, there’s a need for a worthy replacement. SVG has a range of benefits and with growing browser support, it makes good sense as a replacement for Flash.

One of the pain points with animating an SVG image is the inconsistencies in how browsers handle these types of images – in particular CSS transforms. Thankfully, this is where a tool such as GreenSock is handy. It solves browser inconsistencies and makes sure everything works as expected.

GSAP is a JavaScript animation library. It has a strong community, thorough documentation, large forums and plenty of demos to help educate you on how the platform works. GreenSock has multiple libraries that specialise in different areas and it’s worth browsing through the list to see what you can use.

Greensock’s performance in the browser is great. It gives you smooth transitions with the GSAP team claiming it’s “20x faster than jQuery” and “faster than CSS3 animations and transitions in many cases”.

If you want to test its performance for yourself, you can run a stress test on the GreenSock website. The test has two variables: the amount of dots animating around the screen; and the JavaScript library used to animate the dots. You can run the animation with different libraries and compare how they perform.

TweenLite is the core animation library for GSAP. It’s small and can be used alongside other GreenSock libraries. It will most likely be all you need for basic SVG animation. TweenMax is a larger library, containing Tweenlite, plus nine other GreenSock libraries. It provides a lot more functionality.

You can build a large animation without Tweenlite but you will find it hard to manage when you enter the editing phase.  This is because when you are animating elements one after another, you will need to set a duration and a delay for each element in your animation. As you tweak an element’s duration, your previously correct delays on other elements will now be too long or too short.  You’ll find yourself spending time re-tweaking delays so it still animates correctly.

GreenSock’s Timeline library comes in handy here, because it solves the above timing issues by completely removing the dependency for delays.  Each element in your stack waits for the previous elements to finish animating before it starts animating. Since the full animation runs in a cascading order you can reorder elements and change durations as you please.

Getting started

In the following examples, we will be using the TimelineMax library because it has more features. You could do these examples with TimelineLite though for a lighter weight version of the plugin.

The first thing to do is create a Timeline instance and store it as a variable. Your animations append to this new timeline. You are not restricted to only one timeline. If your animation was made up of lots of pieces you could create multiple timelines for each piece and nest them under one master timeline.

var tl = new TimelineMax();

This line of code creates a timeline instance with a bunch of settings that are pre-configured. It’s possible to change the default behaviour, such as having the animation pause upon creation, or changing how many times the animation plays by passing in an object. To learn more about what you can do and how to do it at this point, refer to this documentation.

Animating elements in a timeline is straightforward. Below is an example of how to use the .to() method to change an element’s opacity to zero as it moves 100px on the x axis.

The tl variable we created in the previous step comes first and holds the timeline instance. Inside the to() method, the element to animate is passed in, along with the duration of the animation. After that, you can list anything you want to animate in a comma-separated list.

tl.to(element, duration, {
   x: 100,
   opacity: 0
});

Labels + timing.

Animations will be queued and played in whatever order you list them. They play one after the other, which is expected right? But what if we want to overlap animations, have a delay/pause between animations, or want to run multiple animations at the same time?

One way to achieve this is to add a string to the end of the method containing a time value.

The string will either need to include a += or -= followed by a duration. The += will add in the specified amount of time before it starts animating, creating a delay/pause effect between animations.

The -= will do the opposite, making the elements animation start early, creating an overlap effect between animations. In the first example below, the element waits 0.5 seconds before it starts animating. In the second example, the element starts animating 0.5 seconds before the first element finishes animating.

tl.to(element, duration, {
    x: 100,
    opacity: 0
}, "+=0.5");

tl.to(element, duration, {
    x: 100,
    opacity: 0
}, "-=0.5");

Another way of organising animated elements is to use labels. Labels group elements that you want to animate together in a string. You can name the label anything you choose. Elements with the same label will animate at the same time, rather than playing one after another. Labels can also be appended with += time and -= time if you want to add offsets to an element’s animation. Below are three examples of how you might implement labels in your timeline.

Example 1

tl.to(element, duration, {
    x: 100,
    opacity: 0
}, "myLabel");

Example 2

tl.to(element, duration, {
    x: 100,
    opacity: 0
}, "myLabel+=0.5");

Example 3

tl.to(element, duration, {
    x: 100,
    opacity: 0
}, "myLabel-=0.5");

Easing

Easing changes the rate of speed through an element’s animation. A linear ease will move an element at a constant speed from start to finish. An ease-out ease will start fast and slow down as the animation comes to an end. Adding the correct easing to your animations makes your animation more realistic and a lot better.

GreenSock offers a lot of easing types and offer a great visualiser tool on their website. If you want to learn more about easing and how it can be used, Ryan Brownhill wrote an article on crafting easing curves for user interfaces. It’s well worth a read and helps to further illustrate this concept.

You can also set the ease for an element’s animation. Below is an example of animating an element’s opacity and assigning a custom ease via the ease property.

tl.to(element, duration, {
    x: 100,
    opacity: 1,
    ease: SlowMo.ease.config(0.5, 0.7, false)
});

When you create a timeline instance, the setup with a default ease is Power1.easeOut. It’s possible to change the default ease with this line of code.

TimelineMax.defaultEase = add easing you want here;

Control

One of my favourite features of Timeline is that your animations are on a timeline and you can add controls. These controls pause, play, resume, reverse and restart the animation. You can build on this functionality to create some pretty cool interactive animations.

Chris Gannon, for example, created this demo to show you how you can scrub through an animation with your mouse. I also really like Adrian Parr’s demo on how to scrub through an animation using an on scroll event.

Key methods

If the information above is too dense for you, these are the fundamentals you need to get started. If nothing else, start attaching these methods to elements to see how they work. It’s also a great cheat sheet for when you’re getting started as these are methods you’ll find yourself using regularly. For an in-depth cheat sheet, check out the one Petr Tichy has put together here.

  • Set() is the equivalent of animating an element with a zero second duration. It alters an element’s appearance or position without any transition.
  • To() animates an element to a state.
  • FromTo() animates an element from one state to another state.
  • StaggerTo() animates a group of elements at the same time but with a staggered start time that you specify.
  • StagerFromTo() is a combination of the above fromTo() and staggerTo().

Helpful methods

In addition to the functionality I’ve provided in this article, I also wanted to briefly highlight three methods that I found helpful in Greensock.

  • Seek() is handy when it comes to tweaking and polishing your animation. It can be time consuming if watching the whole animation over and over. Seek takes either a time or label as its parameter. This means if you just want to view a part of your animation you can pass in a label and it will start from that point.
  • Pause() is great for inspecting what’s happening in your animation. It can be useful to chain this after a Seek call to see how things look.
  • Timescale() speeds up or slows down the overall timeline of your animation. Sometimes it can be hard to dissect an animation when it’s playing at a normal pace. Slowing it down gives you a better insight into how it’s fitting together. Timescale also comes in handy once you have built an animation and want to speed it up or slow it down without going through and tweaking the values.

The finished animation!

Putting all the above examples together, here is the finished animation I built using the tools and methods mentioned here. I encourage you to read the code and comments to see how it fits together.

View the animation on Codepen and play around with it in your browser. Don’t be scared of breaking it – go ahead and edit the code, tweak values and re-order events. Experimenting with the animation will improve your understanding of how it works. If you have any questions, feel free to add them to the comments below – I’m more than happy to try and help you out if I can.

See the Pen Article by Allan Pope (@allanpope) on CodePen.

Further resources

If you can’t get enough of GreenSock and want to read more about animating SVG images with it. Check out these links for more information.

Wrapping up

This article is meant to be an introduction to GSAP. I hope you’ve found it useful. Take these foundation ideas and create something simple or make it as intricate as you want. I’ve mentioned in a previous article that Codepen is a great source of inspiration and this is definitely the case for animations.

Here are some of my favourite GSAP animations. I recommend viewing the animations and reading the source code to see how different people create them. Viewing animations at a slower pace will help you get a better look at how it moves and fits together. As I mentioned earlier in the article, we can apply a Timescale to the timeline to slow it down.

After viewing the demos and learning how to animate using GreenSock, I hope you’re inspired to go off and make something of your own.

Post a link to your work in the comments, I’d love to see it. If you are thinking “I want to make something but I can’t think of anything to make”, check out the Codepen Creative Challenge.

It’s a growing community where users create pens around a theme. There are no prizes – it’s all for the fun of it. But it’s a great way to get inspired and to build something, share knowledge and be part of a community. It’s super-cool to see what others come up with.

Happy animating!

  • Pingback: SVG animation with GreenSock. | Front End devel...()

  • Hi man, thanks for this awesome article!
    But you know what, in safari the door doesn’t open or close.
    Is this a know issue of greensock support?

    • Hey, glad you enjoyed it. I’ve had a look and it seems like it is a browser support issue rather than a GreenSock issue. On the GreenSock site there is a page for SVG tips and under the heading ‘Other SVG Gotchas’ it mentions ‘The current SVG spec does not account for 3D transforms. Browser support is varied. Best to test thoroughly and have fallbacks in place.’ – http://greensock.com/svg-tips

      • “It solves browser inconsistencies and makes sure everything works as expected.” — but browser support is varied. So what inconsistencies does GreenSock solve exactly? In any case, looking forward to seeing more SVG platforms like this — thanks for sharing!

        • The inconsistencies it solves are to do with how different browsers handle animating/transitioning SVG images. One of the main inconsistencies is how browsers handle css transforms on SVGs. Say you created a demo where you spun an SVG image around using CSS transforms, you would open up the demo in different browsers and see the same animation either not working or working slightly differently to how you expected it to work. This article on CSS Tricks explains some of the inconsistencies more in depth. An example from the article is – “IE and Opera don’t honour CSS transforms at all on SVG elements. Instead, you must assign the value to the transform attribute.” – https://css-tricks.com/svg-animation-on-css-transforms/

          When you use the GreenSock library it fixes these kinds of variations, so when you open it up it in a browser it works in a consistent way.

          In terms of browser support, this quote on the GreenSock site might be helpful –

          “Some browsers simply can’t support certain CSS features (like 3D or boxShadow in IE8). Instead of throwing errors that halt JS execution, GSAP ignores attempts to animate unsupported properties.”

  • Pingback: Collective #185 - Daniele Milana()

  • Antoine

    Hi Allan,
    Thanks for this great insight!
    One question that might be idiot: is there any tool provided by GreenSock to transform a SVG file to HTML code? Because I already have my SVG file but I would like to avoid to recreate it with the in my HTML code.
    Cheers,
    ^antoine

    • Hey Antoine,

      No problem, I’m happy you got something out of it. I’m not a 100% sure I understand your question but it sounds like your wondering how to get the HMTL markup from a SVG image you have created in something like illustrator or downloaded. If thats what you’re after then drag the SVG image into a code/text editor and you will see the SVG HTML markup that you’re after.

      • Antoine

        It was exactly my problem, I did what you said (it was as simple as that :)) and it works like a charm.
        Thanks again
        ^antoine

  • Pingback: Les profondes ressources du net 28()

  • tomwo

    Here is a visual/no coding authoring tool that uses Greensock: http://www.anitool.com