Draw the Alligator.io SVG Logo with GreenSock

To get the most out of this article it is important that you have a solid understanding of JavaScript. We will be solely focusing on understanding GreenSock in this article, so if you haven’t used JavaScript before then get learning and come back!

What is Greensock?

GreenSock is a JavaScript animation library that saves us a lot of pain when creating our animations especially when it comes to cross browser capability. GreenSock can also be called GSAP (GreenSock Animation Platform) and I will use both interchangeably. GSAP can basically animate any property you throw at it, ranging from CSS properties to SVG attributes.

GSAP has multiple tools you can use, which include:

• TweenLite which is, as the name implies, a lightweight version
• TweenMax which is fully packed with all of GSAP’s power
• TimelineLite & TimelineMax are sequencing tools which helps manage the timing of our animations

GSAP can be installed as an npm module:

$ npm install gsap

Or loaded through a script tag:

<script src="<https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js>"></script>

GreenSock Basics

To demonstrate GreenSock I am going to use Codepen. You can fork the pen here which has GreenSock already set up.

Let’s start off basic and animate a red square across the screen using GSAP’s to method. We create the red square like so:

<style>
  #element {
    height: 150px;
    width: 150px;
    background: red;
  }
</style>
<div id="element"></div>

To animate this we pass 3 arguments to the to method, the arguments are:

.to(elToAnimate, duration, propToAnimate)

So in our case the element we want to animate is #element, the duration is 1 second and since we want to move our square our final argument is an object targeting the x property. Our code is:

TweenMax.to("#element", 1, { x: 100 })

This gives us the following:

Don’t worry about the gif, it’s much smoother in real life, as you’ll see on Codepen!

Let’s say now we want to rotate our square, all we need to do is:

TweenMax.to("#element", 3, { rotation: 360 });

You can make this rotation infinite by adding repeat:-1 to our object. You can also add in the yoyo property which will alternate the animation between backwards and forwards.

We can start from a different position using the fromTo method. This is similar to the to method but we can supply an extra object of where we would like our animation to start. If we wanted our square to begin at x:300 then we pass this as the third argument to fromTo.

Code wise this looks like as follows:

TweenMax.fromTo("#element", 3, {x: 300}, { x: 100 }); 

Visually:

We can do more than change the position of our square, we could also target something like the opacity:

TweenMax.fromTo("#element", 5, {opacity: 0}, { opacity: 1 });

Again we use the fromTo method and start our opacity at 0 and finish on 1.

Ok, I’m sure you are incredibly uninspired right now as let’s be honest the above is quite boring. Let’s do something more interesting, we’ll use the Alligator.io logo and do something cool!

Alligator.io SVG Logo Animation

I stole the Alligator.io logo from the website, hope Seb doesn’t mind. Here is the starter pen with our SVG inside.

So our goal with this animation will be to draw the logo and fade in the green color.

The first thing we need to do is set a stroke-dasharray and stroke-dashoffset on our graphic. These are the attributes we use to simulate a drawing effect, you can read more about these properties here.

In our CSS we set the following:

#alligator path {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  fill-opacity: 0; // we will animate the fill in
}

With this in place, our alligator has now disappeared. Let’s go animate it back in using TweenMax.

We use the to method which we used above, then we set our stroke-dashoffset to be 0.

TweenMax.to("#alligator path", 15, { "stroke-dashoffset": 0 })

We use the same selector we used in our CSS #alligator path, set a duration of 0 and then set our stroke-dashoffset to 0. This gives a really cool drawing effect:

How cool is that?!! ✨

Now the next thing we need to do is get our color back in. We do this by adding an extra property to our object.

TweenMax.to("#alligator path", 15, { "stroke-dashoffset": 0, "fill-opacity": 1 })

The problem we currently have is that the duration is quite long and this looks a little weird with the fill-opacity property. Ideally what we want is to first draw, then when that finishes we’ll fill in the graphic. The old way to achieve this was to have two separate animations with the second animation having a delay that matches the first animation’s duration. GreenSock gives us the great TimelineMax which does this for us.

TimelineMax

The first thing we need to do is create an instance of the TimelineMax class like so:

const tl = new TimelineMax()

Then we call the to method on our instance and pass it our drawing effect:

tl.to("#alligator path", 10, { "stroke-dashoffset": 0 })

Then we call the to method again but this time for our fill-opacity:

tl.to("#alligator path", 5, { "fill-opacity": 1 })

With that in place we then get the following:

TimelineMax is extremely powerful and this is just scratching the surface, creating sequential animations has never been easier!

Conclusion

This is a nice quick intro into GreenSock and the most common methods. It’s a really powerful tool and if you enjoy making animations then you should really consider using it for your next project!