Web Development

Awesome Animation with GreenSock & JS

Funky and eye catching team pages are always in demand – especially when you work for an small-ish (<25 staff) agency trying to stand out from the crowd.

The cooliest team page I created was for Gatehouse, an Internal Communications Agency. I used an animation framework called GreenSock to animate an SVG overlay of a photograph taken of each staff member.

Start with SVGs

Disclaimer: Not a designer 🙂

Awesome design guru Nick Kingan over at www.northform.co.uk created the SVG you see before you  after being provided with a photograph of yours truly.

What is an SVG? SVG is an acronym for Scalable Vector Graphics – and the definition according to WikiPedia:

XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999.

TLDR: It basically means you can draw 2D pictures/shapes/lines using code that is compatable with web browsers – below is an code and output example;

1
2
3
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

So the Circle shape is pretty straight forward. You can work out the syntax and what each attribute stands for with the shape. On the flip side, to turn my photo into an interactive element a lot more work (and code) is required.

Below is a very basic idea of how the animation progressed;

animation Progress

As you can imagine, drawing a Circle, using built in syntax is fairly simple. However Nick created an incredibly complex set of shapes or ‘paths’ to overlap my face.

The code below shows that you start with the <svg> tag and use <g> tags for grouping – the g actually stands for Group – shocking I know 🙂

In the ‘Flesh’ group you can see 4 elements – one is my wonderful face, one is the left hand, and the other two are for my fingers for my right hand slightly offscreen.

The fill attribute contains the hex code for the color of the shape and the ‘d’ attribute stands for ‘Description‘ which will then be filled with an instruction of how to draw the path onscreen. There are five different instructions you can use;

  • moveto
  • lineto
  • curveto
  • arcto
  • closepath

The finished SVG – no animation

These instructions start with ‘moveto’ or as the syntax shows ‘M x,y’, followed by some ‘curveto’ or ‘c’ instructions. The numbers following  each instruction are coordinates – theres a much better guide here if your interested in the SVG side of things. You will soon see why I suspect a plugin/program involved.

Take notice of the group called “lines” – all the paths inside are black outlines for the shapes – these are the main items to be animated, notice how they share one of three different classes.

Getting into GreenSock

GreenSock, or GSAP is an incredibly powerful JavaScript framework that allows you to animate SVG’s (and more!) – I am still learning about it and discover new functionality on a daily basis. The Javascript library we will be using is TweenMax.js.

Michael Burdett
Web & App Developer