top

Facing Advanced Animations

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! Prepare files 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! SVG animations are among the most beautiful parts of the web, you can turn an illustration into motion with just a few lines of CSS or JavaScript. 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? There are probably more than a hundred JavaScript animation libraries out there to choose from; and CSS animations? Quite a few options as well. Then, how do we pick our best tool? It always depends on our project, there is no right or wrong, there is only research and preparation, so if you have been paying close attention and following the steps you won’t be lost in the Wonderland of choices because you have every tool to make the right choice. 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. JavaScript: If your animation is type 2 or 3 then you are facing a more complex animation, you might need to chain events and effects. CSS may be able to do all this but your code might get messy or WET ("write everything twice" / "we enjoy typing"). If you are facing these kinds of advance animations and interactions then your best friend is JavaScript. 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!​​​ Animate! At last! Get your keyboard ready and begin coding your next experience!
Rated 4.0/5 based on 20 customer reviews
Normal Mode Dark Mode

Facing Advanced Animations

Evangelina Ferreira
Blog
12th Dec, 2017
Facing Advanced Animations

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.

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

user interfaces

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

storytelling advanced animations

  1. 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!

advanced animations 3

 

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!

storyboard advanced animations

Prepare files

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!

SVG animations are among the most beautiful parts of the web, you can turn an illustration into motion with just a few lines of CSS or JavaScript.

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?

There are probably more than a hundred JavaScript animation libraries out there to choose from; and CSS animations? Quite a few options as well. Then, how do we pick our best tool? It always depends on our project, there is no right or wrong, there is only research and preparation, so if you have been paying close attention and following the steps you won’t be lost in the Wonderland of choices because you have every tool to make the right choice.

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.

  • JavaScript: If your animation is type 2 or 3 then you are facing a more complex animation, you might need to chain events and effects. CSS may be able to do all this but your code might get messy or WET ("write everything twice" / "we enjoy typing"). If you are facing these kinds of advance animations and interactions then your best friend is JavaScript.

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

Animate!

At last! Get your keyboard ready and begin coding your next experience!

Evangelina

Evangelina Ferreira

Blog Author

Evangelina Ferreira is a Front-End Developer from Buenos Aires, Argentina. She currently works at the National Technological University of Argentina as a professor and as a UI Developer in Aerolab. In her free time, she likes to talk to her cats and help organize CSSConf Argentina.

Leave a Reply

Your email address will not be published. Required fields are marked *

SUBSCRIBE OUR BLOG

Follow Us On

Share on

other Blogs

20% Discount