Introduction
This animation will be built by combining two web design tools: SVG graphics and JavaScript. Scalable Vector Graphics (SVG) are vector based illustrations that are written in code that can be interpreted by a browser. If you look at an SVG file in a text editor, like Sublime or Code, you will recognize tags, just like in an HTML document. The interesting part of SVG, besides being vector so they can be scalled without worrying about resolution, is that their code can be assigned CSS properties, just like HTML. So, of course, we can use this to animate elements of an SVG illustration using JS. (And even CSS Animations! But we won’t do this here.)
The animation technique we will use in this tutorial 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, or the frames, in between. It makes creating predictable movements, like translation in straight lines or scaling, super easy. 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 with animations in different software, you may have noticed tweening tools. Here, we will use a JS library called GreenSock Animation Platform or GSAP. (In the the next tutorial, if you follow them in order, we use plain JavaScript to handle the tweens.)
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 functions and even plugins you can play with. You are welcome to check these out. But in this tutorial, we use GSAP.
The animation we will build is a simple model of the planet Mars and its two 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.