Tutorial

Draw the Alligator.io SVG Logo with GreenSock

Published on September 19, 2019
author

Paul Ryan

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:

Red square moving

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 });

Red square rotating

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:

Red square moving opposite way

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 });

Red square animate opacity

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.

Alligator.io logo

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:

Alligator.io logo first draw

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:

Alligator.io logo second draw

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!

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors
Default avatar
Paul Ryan

author

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more