Animate a Robot with Greensock

So, today we are going to animate a Robot SVG using the GreenSock library. I haven't even started the work yet, but by the time you're reading this article I will be done. I have decided to document my journey of creating this animation so by the end I can teach you so you won't have to face the same struggles (fingers crossed 🤞) .

This article will focus on creating 3 animations for our robot; blinking, antenna wiggle and making the robot move a little. So let's get started!

The first thing we need to do is go find a Robot SVG. I absolutely love Illustrations for finding cool SVG images. I downloaded the Robot SVG from there but I made it a lot cleaner than the original so it is actually possible to animate it. The following is our Robot.

So with the SVG in place, we have our starting point, now let's go animate this shit!

Make sure to fork my pen if you want to follow along as you will need the Greensock dependency.

Link to the final Codepen is here.

Making The Robot Move

Let's write some Javascript.

Create a function called moveUpAndDown which will will do as it says.

const moveUpAndDown = () => {}

For this movement to work, we need to move 3 areas of the robot - the arms, the body and the head. We use document.querySelector().

Code is:

const body = document.querySelector('#body')
const head = document.querySelector('#head')
const arms = document.querySelector('#arms')

As you can see, we haven't used the wonderful Greensock library yet, we will start now by using TweenMax to animate all the parts at the same time. You don't actually need to put the elements in variables, you can just pass the selector to TweenMax but this is the way I prefer to do it.

We will use the to method to move our robot parts, the code is:

TweenMax.to([body, head, arms], 0.3, {y: '20px', yoyo: true, repeat: 1});

This may look a bit daunting but it is actually quite simple, the signature of the method is:

.to( target:Object, duration:Number, vars:Object, position:* )

So the object in our case is the body, head, arms, the duration is 300ms and we want to move the y position 20px. The yoyo property will animate the animation back to the start, this saves us having to write code to move it all back which is very useful.

Wiggle The Antenna

This is quite a bit more challenging than above, but will also be a lot more beneficial to our learning so let's do it!

Create a wiggleAntenna function as follows:

const wiggleAntenna = () => {}

So to get the antenna to wiggle I needed to change my rect to be a path as we don't have enough control over the rect to achieve the animation. To learn more about SVG paths check out my article here. I then used the q command to add a small curve, the q command accepts two arguments - the control point and end point of the curve (that's the actual definition for it, don't worry, it confuses me too)

q x1 y1, x y

Thankfully q is one the easier commands to understand, I'll explain each point:

Visually it look's like this:

Our two antenna's svg code will now look like:

<path id="antenna-1" fill="none" stroke="#3DA4AB" d = "M 54 5 q 0 0 0 50" x="54" y="5" stroke-width="5.38452043"></path>
<path id="antenna-2" fill="none" d="M 108 5 q 0 0 0 50" width="5.38452043" stroke-width="5.38452043" stroke="#3DA4AB" height="46.926779"></path>

Visually:

Robot's Antenna

I added ids to the antenna and the ellipses so I can get a reference to them like so:

const antenna_one = document.querySelector('#antenna-1')
const antenna_one_ball = document.querySelector('#antenna-1-ball')
const antenna_two = document.querySelector('#antenna-2')
const antenna_two_ball = document.querySelector('#antenna-2-ball')

What we need to do is simply animate the x1 value, once in a positive direction and once in a negative direction. We will use TimeLineMax so we can chain animations.
Code is:

const wiggle = new TimelineMax()
wiggle.to(antenna_one, 0.1, {attr: {d: "M 54 5 q 10 10 0 50"}, repeat: 1, yoyo: true})
  .to(antenna_one, 0.1, {attr: {d: "M 54 5 q -10 10 0 50"}, repeat: 1, yoyo: true})

We will also give a small animation to the antenna ball so it slightly moves

const antenna_one_ball = document.querySelector('#antenna-1-ball')
TweenMax.to(antenna_one_ball, 0.1, {repeat: 1, yoyo: true, x:1, y:0})

We will do the same for the other antenna and ball, you can see the code in the Codepen but best to do it yourself as a little test.

We should now have the following:

Wiggle Animation

Certainly not the sexiest, but served as a good lesson to learn the q command.

Make The Robot Blink

This is not quite as challenging as above, we just need to set scaleY to 0 and have our time set as 100ms which simulates a blink.

Let's create a blink function:

const blink = () => {}

Get a reference to our eyes:

const eye = document.querySelector('#eye-1')
const eye2 = document.querySelector('#eye-2')

Then we just need (note that we can pass multiple elements in an array) :

TweenMax.to([eye, eye2], 0.2, { scaleY: 0, yoyo: true, repeat: 1, transformOrigin: 'center'})

The transform-origin property is used to change the position of the origin of transformation of an element.

Blinking animation

BONUS - Sleep and Wake

I have the code for the SVG in the Codepen, but you should try this one yourself, basically make the robot close his eyes and open them back up through two function calls.
Sleep & Wake

Conclusion

This article is getting a little long so I am going to finish it here, this is some core animations for our robot. I will continue adding more animations and polishing the current ones until we have a fully animated robot.

Hope you learned something.