But there is another animation technique I wanted to show you besides frame-by-frame. It is called tweening. The word ‘tweening’ comes from the word ‘between’. The idea is that you set the parametres of an asset at its initial state, and at a destination state, and you let the computer generate the steps in between. It makes creating predictable movements, like translation in straight lines or scaling, super simple. All you need is where you want your objet to start, where you want it to end, and voilà!
There are different animation tools doing tweening. Actually, if you played around a bit while doing the frame animation in Photoshop, you may have noticed that you have a tween tool there as well. We will use a JS library called GreenSock Animation Platform or GSAP.
There are plenty of other JS libraries that achieve similar results to GSAP. I chose GSAP for three reasons: 1. it is one of the oldest and most used library, 2. it is extremely stable and predictable, 3. it is highly respected and supported, it is the only animation library allowed in most web advertisement platforms. So it is a good choice. If you want, once you have explored this library, you can look at others. One of the cool up and coming ones is called Anime.js. If you know jQuery, it also includes lots of animation code and even plugins you can play with. You are welcome to check these out. But here, we will use GSAP.
The animation we will build is a simple model of the planet Mars and its moons, Phobos and Deimos. It will look like this. This is not a GIF, it is not a video file, it is an animated SVG illustration. In fact, if you click on it, it will pause because I wrote code to make it pause on click.
In this tutorial, you will use Illustrator to draw the static model and export the SVG. (I assume you know Illustrator.) You will also write very basic HTML and some simple JS code to animate your illustration.
Read the whole thing once before you start creating the animation. If you have issues with certain parts, don’t hesitate to contact me.