What do you want to learn?
Skip to main content
by Eva Ferreira
Resume CourseBookmarkAdd to Channel
Table of contents
Let's take a look at some of the external libraries available. First of all, we have Velocity JS. Velocity JS syntax looks a lot like jQuery so if you are used to using this technology it won't be very hard for you to add that to this animation framework. It has a great documentation in the official website and it animates separated transform properties, a very useful feature currently not available in CSS. The performance is not the best, especially if we compare it to GreenSock. GreenSock is the main library we will be using in this course. It also works with separated transform properties. It has a great documentation and a big community that can help you in anything you need. The performance is great and it automatically fixes the different cross-browser on SVG transformations. The bad part of GreenSock is that some features are not free. Then there's BodyMovin. BodyMovin is an After Effects extension that exports your animations in web format. It has a low learning curve even though we must consider that you should know how to use After Effects. It is performant and the bad parts are that you need an After Effects license and you don't always have full control of the result. In the next part of the course we will work on how to plan animations, how to export the illustrations, and how to animate them using GreenSock and BodyMovin.
Prototyping and Setup
Prototyping and Set Up
In this part of the course we will be talking about the process before an animation gets into the browser. We will learn how to prototype an idea using tools such as storyboards and scripts and how to identify the assets we will be needing. Later on we will find those assets and learn how to export them using Adobe Illustrator. First of all, let's talk about the different animation types available. Defining the type of the animation we want to create will help us achieve a better result. Every animation and transition should have a purpose. Our first type of animation is the user interface animation. This is the most significant animation you can add to your website. UI animations provide meaningful information to users. These include loaders, spinners, hints on correct and incorrect inputs and many, many more. I highly recommend you to get information from CodePen Patterns where you will find amazing examples of UI animations. Our second type of animation is the storytelling animation. These are ideal to instruct the user on how to use a new app, a new feature, or simply escort them through a process. One wonderful example of this type of animation can be seen on MailChimp every time you send an email. If you are not familiar with it, I recommend you watch this talk by Eric Muntz at ColdFront 2017 where he shows the way MailChimp does the storytelling animations or read about another one the historical animations in this blog post. These animations can be harder to implement, but they are extremely useful for the user. This might seem silly or useless, but there's nothing wrong with animating a flying unicorn from time to time. What's commonly known as useless animation is actually a great way to practice new techniques and build a portfolio. You don't really need any skills to animate. We will be working with this kind of animation today.
Storyboards and Scripts
Now that we have decided which kind of animation we will be doing, it's time to prepare our story. Even if this feels a little farfetched, if we are working on a UI animation it's very important not to miss this step since it will prepare us for coding time. There are two main types of preparation we can do, scripts and storyboards. It is ideal to do both, but as long as we prepare one we will be ready to animate. Let's take a look at the difference. The script is written text. It is commonly used in movies or short films to describe what is going to happen each second of the animation. In this paper we should tell the story of our animation from the beginning to the end. We should also focus on how our camera or screen is going to show each part of our characters. On the other side we have a storyboard. This is a set of sketches that will describe this story in a more graphical way than the script. You don't need to be an expert illustrator to do this. Some fast sketches will be enough to cover the story and have a great insight on how each frame will look. Okay, you might be wondering at this point why would we bother with these things? We're not making a movie, I know, but the truth is that there are a few reasons why making a storyboard or a script will actually help you when animating for the browser. First of all, it will let us focus on the story instead of the technology. Animations need to add value to the user and that value is inside the story. Once we focus on the story we will be able to create an interesting story line that goes with it and we will define the frames and field sizes that we will be coding later on. We use different field or shot sizes to show the user exactly what they should be focusing on. You can learn about the most common ones on learnaboutfilm.com. You can have an example of how shot sizes work on the web inside the involving process of tumble.com. See how they use different techniques to make the user focus on the most important content. And storyboards and scripts are not only good for the story itself, they also have a very important role in the planning of the whole animation process. It will let us know the difficulty level of the project and estimate how long it will take. And last but not least, thanks to the storyboard we will be able to see very quickly which assets we will need. So let's move on to the next video where we will learn how to find those assets and export them in Adobe Illustrator.
Now we are ready to go find our assets and prepare them for export. During this part of the course we will be using Adobe Illustrator. You can find it on adobe.com. If you prefer to use an open source alternative I'd recommend Inkscape, which will work just the same for this project. For this occasion we will be using this cute cats illustration from freepik.com and more specifically this cat. You can find the file in the course assets, but if you get into the website you can find a lot of different illustrations that are ideal for animation. Just look for animation or well, why not, kittens. Open the file on Adobe Illustrator and let's get to work. We want to achieve a cleaner code and to do this we need to follow a few instructions. First of all, we need to reorder the illustration to our needs and delete everything unnecessary. So once we open our file in Illustrator we need to first delete everything that we won't be needing. That means deleting all the other kittens. The downloaded file is well organized so we only need to delete all but one layer of the illustration, the one with the cat with the yarn ball will remain. To see the layers we need to go into Window Layers and delete all the layers that we are not using. If you are not sure, toggle the eye button to make certain you are deleting the correct one. And last we need to modify the artboard. We are going to do this using the artboard tool and choosing Fit to Artboard Bounds. Now we move into the second part, apply layer and object names. We need to go back to the layer section and verify that each layer has a unique name and is easy to identify. In this case we will rename our layer cat in lowercase. Depending on the animation, sometimes we need to be very specific and name every part of the illustration. All these names will turn into IDs when we export the file. If we wish to be more specific with this illustration we can apply a name to every part of the cat. For example, ear 1, ear 2, necklace, and so on. Sometimes we also need to group elements and name that group. For example, let's name and group all the elements of our yarn ball. To do this we need to double-click our cat in order to access the main group and zoom into the yarn ball. And using the Shift key and the black arrow we must select all the elements that are part of it. Once we are done selecting them, we right-click into it and select group. At last we name this group yarn ball. Now we are done with preparing our file it's time to export it and optimize it.
Optimize SVG and Animate
Now we have our illustrator file prepared, it's time to export it and optimize it. We don't usually use the SVG file at the exact way that it is exported since a lot of that code is unnecessary for our everyday use. So let's get back on our illustration file. We need to save a copy as SVG. Don't be confused with SVG Compress. Our illustrator will ask us about how we want to export this file. It is important to toggle the More Options view where we will find the most interesting features. When asked about CSS properties we will pick the Presentation Attributes which will apply the style properties in the elements themselves, giving us more flexibility. Okay, now go ahead and open the exported file in a text editor. It has converted all the names we applied to layers to IDs, but it doesn't look that good, does it? Because we still need to optimize it. There are many optimizers out there to choose from. All of these are open source and free to use. SVGOMG by Jake Archibald is my favorite one. Once you upload the file you will be shown your illustration on the left and a list of options on the right. If you are working with a white-looking SVG you will be able to toggle a dark background to work more easily. On the right you will be able to choose if you want your code to look readable or not by using the Pretify Code toggle. If you wish to round numbers or not and for example, if you want to modify IDs. For our cat we will keep it readable code and we will avoid changing the IDs. On the other hand, if your file is not meant for animation then I would recommend to keep your code as small as possible. Now let's click the Download button and let's take a look. Our optimized file looks much cleaner, the IDs are still there, and the code looks readable. Another options it the SVG-Optimizer by Peter Collingridge. This optimizer has fewer options, but it is still a great tool for a quick optimization. We can choose among options such as remove or keep white space, removing unnecessary groups and so on. The last option is SVGO, an optimizer with open UI. It works through npm and will let us optimize SVG by using our terminal. First, we need to install it. We can use our favorite terminal and run npm install -g svgo and then we can compress a file using svgo plus the name of our file. For example, cat .svg. If we wish to create a different file and save it as a copy we will use svgo cat.svg -o cat.min.svg. That will create a new file called cat.min.svg with the compressed code. Among these three I would recommend SVGOMG because of its user interface where we can toggle multiple options and see the results at the same time. Now our code looks a lot better and our cat is still looking great. I must warn you to beware of the optimization because even though it is a necessary tool it can sometimes break our illustration. So be very careful when optimizing and save a copy of your original illustration to avoid any trouble until you are sure that the optimization went great. Okay, it's now time to animate.
Animating SVG with GSAP
Getting to Know GSAP
Using GreenSock with SVG
Now we know how to animate the timeline, it's time to learn how to control it. With GSAP you have absolute control over your animations. You can play them at the right moment, pause them, repeat them, and move them forwards or backwards. First of all we need to pause our animation before we can control it. We will do this by passing paused: true as an option to our timeline when we create it. I have paused the animation and added four buttons, play, pause, seek, and reverse. We have one event listener for each one of them. For the play button we will use the tl.play method. For the pause button the pause one. Seek is a little different. It will move the animation to a point in the timeline, for example 1.2 seconds and then if we want to we can play it from that position. Finally, we have the option to reverse the animation with .reverse.
TweenMax and TimelineMax
The best part about GreenSock is that you only take what you need. If you don't need a timeline you simply load TweenLite and automatically get great results in a performant way. That means you don't need to load the full GSAP library if you are not going to use it. And if you need more features you can use TweenMax and TimelineMax, the most powerful libraries for animations. Both extend the predecessor in different ways. On one hand, TweenMax extends TweenLite with some extra features and the possibility of loading only one file instead of three or four. On the other hand, TimelineMax extends TimelineLite. It will also give us the possibility of loading less files and at the same time we will have more features available. Among those we can find repeating. Just as an example of repeating, let's apply the repeat method to our staggering animation. I have modified the scripts and now we are adding TimelineMax instead of the Lite version. Once we finish our staggering animation we will tell it to repeat a number of times, three for example. If you wish it to repeat indefinitely you need to add -1. I highly recommend you go to greensock.com and read about all the possibilities that these powerful libraries can give us. As a finishing note, let me recommend you what to choose and when. Choose TweenLite for the most simple animations, the ones that don't need a timeline. If you need to chain animations just TimelineLite instead, and if you need repeating features, go for TimelineMax.
Other Animation Libraries
Other Animation Libraries
Eva Ferreira is a freelance Front-End developer with a passion for teaching, currently working on CSSConf Argentina!
Released9 Jul 2018