Animation on the web is a guilty pleasure I get to work on now and then. It takes a lot of hard work and a lot of preparation but the final product is well worth the effort.
In this article, 'll show you my animation routine. From the spark idea to how the implementation works and which are the best animation technologies out there that you can pick from. But we all know that “with great power comes great responsibility” so when animating, we want to make sure that everything we do is performant and adds value to the user experience.
Type of Animations
There are three main types of animations depending on your project. The first step to any animation idea is finding the right category.
User interface animation: This is the most significative 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 get inspiration from Codepen Patterns where you will find amazing examples of UI animations.
Storytelling animation: These are ideal to instruct the user on how to use a new app, a new feature or to simply escort them throughout 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’d recommend you watch this talk by Eric Muntz at ColdFront 2017 where he shows the way MailChimp does storytelling animations. Although these animations can be harder to implement they are extremely useful for the user.
Just for fun animations: These might seem silly or useless but there’s nothing wrong with animating a flying rainbow-looking 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 need excuses to animate!
Storyboard and Script
Now you have picked the type of your animation it is time to sit outside of your office and use old-fashioned pen and paper to script and storyboard it. Even though this stage might seem a little bit far-fetched for a web animation it’s actually incredibly useful and will save you a lot of coding time. You don’t need to be an expert at drawing to make a storyboard, just a simple doodle will do!
Let’s get to work! Before coding we need files! If your animation includes only HTML and CSS elements you can jump to the next section “Choose Your Animation Method”; otherwise, bear with me and let’s take a look at our SVGs!
If you have an illustrator in your team go ahead and ask for files. If you are an illustrator yourself you can use Adobe Illustrator, Sketch or Inkscape to create your assets. However, if you, like me, are not really good at drawing and don’t always have an illustrator nearby then you can go research freepik.com, you will find a lot of free SVG assets you can use in your animations. Take a look at your previous storyboard to check which files you will need.
Once you get the files you need to export them from a vector graphics software to SVG code. In order to achieve this in Adobe Illustrator you must open your file and go to “File -> Save As -> .svg” You will see that there are multiple options to choose from and since the aim of our SVG file is animation we need to get the most readable and clean code we can, so we will make sure you pick the “Presentation Attributes” in “Advanced options”
For more information on how to export your SVG files and optimize them for animation, I’d recommend you read this great article by Sara Soueidan.
Choose Your Animation Method
You have your story and you have your assets, it is now the time we have all been waiting for… Animate!!! But… How?
Let’s take a look at some options and their best use cases:
Native CSS Animation: If you love CSS just like I do then you are probably familiar with transitions and keyframes animations (if you don’t, don’t you worry! It’s always a good time to start!). CSS Animations can achieve great effects in an easy and performant way. If your animation is type 1 (User interface animation) then a CSS only solution will solve it perfectly.
Animate.css: You may want to avoid writing CSS and timing-functions yourself, if that’s the case and your animation is type 1 then this tiny library will help you achieve your animation ends without hassle.
There are multiple libraries to choose from, I’d recommend GreenSock since it has a great documentation, wide browser support and it automatically fixes many browser bugs for you.
- Web Animations API: If you are really into type 3 animation and looking forward to something experimental then I highly recommend you take a look at the Web Animations API, a native way to create complex and sequential animations. It is currently experimental and not yet fully ready for production but it has a bright future ahead, so check it out!
At last! Get your keyboard ready and begin coding your next experience!