Intro to SVG & Greensock for UI and Animation

As you can probably tell from my portfolio, I love animation. Imagine my thrill when I discovered the many ways you can do this on the web. I was hooked. There are many ways to animate. Canvas, Gifs, CSS… Let me introduce you to my favorite; SVG and Greensock.

(This will be an overview. If you are looking for implementation examples, check back later this week.)

What is SVG?

I know, I’m starting off pretty basic here but I don’t want to assume anything. So, please, bear with me. An SVG, Scalable Vector Graphic, is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. Let’s break this down.

“XML-based” means that it’s written in code. Because it is, you can embed it into your html and manipulate its innards or just use an <img> tag like any other image. I will go a bit more into this in my next blog post.

“Vector image format” means that it can scale and not lose clarity or get blurry like a JPG or PNG. This makes it great for responsive web projects.

“Interactivity and animation” means… well… interactivity and animation.

SVG’s are supported in all latest versions of all the major browsers. Even IE back to IE 9. You might have some issues with Android 4.3 but, seriously, if you still have android 4.3, viewing animations on the web is the least of your worries.

Fire!

 

 

What is Greensock?

Greensock is a powerful, lightweight, JS animation platform, that lets you animate almost any DOM element properties, CSS values, canvas objects, SVG elements, and more. It is not jQuery dependent, it’s fast, it has simple syntax and has cross browser compatibility all the way back to IE 6, people. Amazing overkill!

Greensock is especially useful when it comes to animating SVG’s because of this nightmare we call cross browser compatibility. Many of the browsers have their own special way of interpreting how svgs are setup leading to variations like this:

Chrome Chrome

IE & Opera Chrome

Safari Chrome

Firefox Chrome

Say you want to spin an element pivoting from the middle. The purple line is what it should do. The green box is what it actually does. IE & Opera don’t support CSS animation in SVG (I think this is fixed as of IE 11 and edge), something funky happens when you zoom in while using safari, and Firefox decided that you would always want the orientation to be in the upper left. Perfectly logical. Greensock takes this mess and makes sure all the browsers interpret the same way. Super convenient.

 

When should I use Greensock?

Greensock is not always the right tool for the job. No matter how nice it is it’s just another js library so you’ll want to make sure you really need it for what you are doing. So, a few questions you should ask yourself before implementation:

What am I animating? Am I just moving a div or elements inside a svg?

How much am I animating? Am I just creating slide in/out menus or am I using a longer more complicated animation?

What browsers do I need to support? A lot of the browser differences are becoming smaller and smaller with each passing release. You might be able to accomplish what you want with CSS. Or you could have that one client that has all internal browsers on IE8. You know who you are.

 

What can I do with Greensock?

Ok, so you’ve decided that you can’t live without Greensock. Let’s look into what all you can do with this magnificent beast.

Timelines. One of the most useful features is the timeline. This allows you to make complicated animations step by step and control when they happen within the timeline with minimal math. Math hurts us, precious!

Nested Timelines. Take the previous awesomeness and take it to the next level. A series of timelines, timelines of timelines. Greenseption.

Draggable.  Yes, this is drag and drop. But not only drag and drop. Drag and drop with physics.

DrawSVG.  This allows you to take paths in an svg and reveal them over time giving the illusion of drawing. Hence…  DrawSVG.

Stagger. Say you have a whole bunch of little elements that you want to do the same thing but at different times. Enter Stagger. You can collect all the elements and then apply an animation to them one at a time. You can control the speed and interval with this as well.

MorphSVG. You can take a simple shape like a star and turn it into an elephant. Because, why not? I will go into this in more detail in a later blog as well. You can imagine this has some interesting implications for UI.

 

Uses for SVG and Greensock in UI

All these tools have some interesting implications for UI.

Interactive and intuitive maps:

See the Pen Context-Shifting in UX Patterns by Sarah Drasner (@sdras) on CodePen.

 

Menu systems:

See the Pen Using Sara Soueidan’s Circulus.svg by Sarah Drasner (@sdras) on CodePen.20473

 

As well as fun animations to capture people’s small attention spans:

See the Pen Understanding GSAP’s Timeline by Sarah Drasner (@sdras) on CodePen.20473

 

Or good old fashioned character animation:

See the Pen Fort Lauderdale – Cinema Paradiso by Ryan Leichliter (@LeKohrs) on CodePen.20473

 

If this kind of thing gets you excited, try it out. Make a Codepen and send it to me. Also, check back later this week for a more in depth look into some of these tools and some implementation examples.

 

 

*Thanks to Sara Drasner for some of these pens and the amazing class I stole them from. If you want to keep up with this topic, follow her on twitter.

**Here are the slides for the corresponding presentation.