Animate a Robot with Greensock
Tags: svg, javascript, animation, greensock
Published: 2019-01-25 19:25:42

---
title: Animate a Robot with Greensock
published: true
description: Learn to animate SVGs with Greensock
tags: svg, javascript, animation, greensock
canonical_url: https://medium.com/@paulryan17/animate-a-robot-svg-with-greensock-e62baa5f05b6
cover_image: https://cdn-images-1.medium.com/max/2560/0*zuRgRQ9Zv5FzpfX6
---


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; <strong>blinking, antenna wiggle and making the robot move a little.</strong>  So let's get started!

The first thing we need to do is go find a Robot SVG. I absolutely love [Illustrations](https://undraw.co/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.

{% codepen https://codepen.io/PaulRyan17/pen/pQRGmN %}


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](https://codepen.io/PaulRyan17/pen/WLzYzL) 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.

![Robot moving up and down](https://cdn-images-1.medium.com/max/800/1*3zs-xLJvU2lHQlogflzIhg.gif)

##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!

![Motivational Shit](https://cdn-images-1.medium.com/max/800/0*K1tyV0bMtowMDkwf.gif)

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](https://medium.com/@paulryan17/svg-path-basics-79a0334faab6). 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:
![Q command explained visually](https://cdn-images-1.medium.com/max/800/1*kuK1lOJBhBTkvGPbNT3xfA.png)

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:
![The Robot's Antenna](https://cdn-images-1.medium.com/max/800/1*yxD3YXo3GEXTomiqwVENcw.png)


##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
![Robot's Antenna Wiggling](https://cdn-images-1.medium.com/max/800/1*OOUkpUTtdhlhoUdaSUR87Q.gif)

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
![Robot Blinking](https://cdn-images-1.medium.com/max/800/1*qO4Fhyk4ZYWv-aN8AyQ09g.gif)

##BONUS - Sleep and Wake
I have the code for the [SVG in the Codepen](https://codepen.io/PaulRyan17/pen/WLzYzL), 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
![Robot Sleeping and Waking Up](https://cdn-images-1.medium.com/max/800/1*wN2uTVnRAO9n-KWssR-sFg.gif)

##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.