Web Animation — A comprehensive overview
Contents:1. BASIC INTRO - css and html2. JAVASCRIPT LIBRARIES - start with GSAP and mo.js3. PLUGINS - smaller libraries/toolkits to know about4. WORKFLOW - a few resources for efficiency5. INSPIRATION - people to follow, websites to subscribe to6. DESIGN PRINCIPLES - read up on when/how to use animation7. MORE ?! - AE plugins and misc articles
This article is for people who are familiar with front end code and want a thorough overview of the existing methods, libraries, and resources for simple 2D web animation.
This is NOT covering advanced things like WebGL animations using GLSL shaders, physics libraries, robust game libraries like pixie.js, 3D libraries like Three.js, or huge platforms like p5.js. It’s about DIY, writing code from scratch.
1 . Basic Introduction
There are three languages you need to know — javascript, html, and css (scss or sass are even better, but css will do). If you know only css and html, that’s fine; javascript you can pick up easily as you need it on a per-library basis. In fact, here is an entire article on ‘CSS vs Javascript’ for animation. CSS and html can accomplish incredibly robust animations and interactions, so let’s focus on that first.
METHOD 1: CSS ANIMATIONS
Note: you can do everything mentioned here in css, but if you start using this in your professional workflow, take a timeout and learn scss or sass because with those languages you can use variables which saves tons of time.
First, here is a list of all of the properties that can be animated using CSS.
For almost any of these properties (there are always caveats and edge cases), we can animate them in CSS with one of two methods — transitions or keyframes.
Here is an example of using transition (look at the CSS tab):
Here is an example of using keyframes (look at the CSS tab):
If you’re intrigued by these two examples, the best way to learn CSS animation is from Val Head on Lynda:
Another great reference is this Codrops page , where they cover parameters, functions, datatypes, and more!
Or if you learn better by clicking around existing examples, here are 50 examples of css parameters (some are animated, some are just properties that you might not have realized could be set in css)
If you’re old school, here’s a book!
And if you’re ready for sass, here’s their website. I suggest using Lynda again to learn this in detail.
METHOD 2: SVG
SVGs are scalable vector graphics and they are easily to manipulate with css or simple javascript. The workflow for SVG is to build your file in illustrator, or download an SVG from somewhere like the noun project, then copy paste the generated code into your html like this:
The most common animations on svg elements is to animate the stroke. Like this!
For that you would use the CSS parameters ‘stroke-dasharray’ and ‘stroke-dashoffset’ like this:
.outline {
stroke-dasharray: 0;
stroke-dashoffset: 0;
animation: offsetStrokes 4s .5s ease-in-out forwards infinite;}@keyframes offsetStrokes {
to{
stroke-dasharray: 505;
stroke-dashoffset: 405;
}
}
Here’s a great overview of how the ‘stroke-dasharray’ and ‘stroke-dashoffset’ work. If you start using this technique a lot, it might be time to look at a javascript library like vivus.
For more interesting and complex SVG animation ideas, look at the library http://svgjs.com/ Here is a code snippet of how to instantiate an svg with that library:
Notice that in both html and javascript we use the ‘path’ attribute.
Svg.js is a very robust library and I highly recommend it. Here is a small example I made showing another feature it offers — masking type or an svg path with an image:
METHOD 3: SPRITE SHEETS
If you’re a traditional animator and just want different ways to get your animations on the web, try sprite sheets. This is a process where you export the frames of your animation, then compile them all onto one large file, equally spaced. Then, in css you tell the DOM element how far to scoot around the document and at what frame rate:
Here’s a whole medium article on sprite sheets, if you want to dig into it. And if you’re dead-set on animating and having the code generated for you, there are plugins for AfterEffects (one listed in section 7) or you can try the desktop application Tumult Hype 3, although be warned — the code generated by these tools has been referred to as ‘garbage’, ‘heavy’, ‘messy’, and ‘wtf’ by many developers I have worked with. This is more of a prototyping route and not for production.
2. Javascript Libraries
For more complex animations and interactions, you’ll want javascript. There are two libraries I would start with (and a thousands more out there). I recommend greensock for manipulating DOM elements, and mo.js for making animations from scratch in javascript.
Greensock (GSAP) can be used in conjunction with anything, you will not regret taking the time to learn this. I even use it to tween my camera moves in Three.js. Design firms like the ones in the Awwwards and dribble communities use GSAP to manually create motion design chains where CSS animations fall short. The best way to get to know this library is to look at the documentation and start with this free online quick course.
Mo.js is more akin to Flash. Keeping with the theme of using boxes, here is how to animate a box in mo.js:
And here’s what happens when you go pro and really understand mo.js:
Read here what the hacker news community has to say about it. And if you like this, dig into the documentation. It’s well designed :)
Other popular libraries (that I have had very little experience with) are paper.js, velocity.js, and two.js. Then of course there’s jQuery which is very easy to use, with it’s .animate() method and using it with the add-on library called jQueryUI is very powerful.
3. More plugins
Plugins, toolkits, toolbelts, frameworks. . .whatever you prefer to call them, I wanted to mention a few more resources for finding smaller packaged animations aside from the two libraries above. These plugins usually serve one purpose per plugin. David Desandro makes some great ones, such as isotope:
…and flickity:
Francis Tseng made this one with svg and javascript so you can make these cool blobs on hover:
I made my own jQuery plugin recently. It makes particles on hover for any object you choose. You can use that if you like! It’s called SparkleHover. Here is a gif of it in action:
And then a quick search on github for “javascript animations”, produces many results. Tip — sort by stars or forks.
Vivus — for drawing on the lines of svg files
Granim- for animated gradients
4. Resources for better workflow and efficiency
- Worried about runtime performance? Use this chart
2. Worried about cross-browser compatibility? DON’T! Just compile with autoprefixer this when you’re ready to deploy.
3. Don’t want to write bezier curves from scratch? Get the code to all of them here
4. Need to clean up your messy svg code before adding to you site? Do it here
5. Inspiration!
WHO TO FOLLOW:
- Val Head
- Rachel Nabors
- Sarah Drasner
- Sara Soueidan
- Ana Tudor
- Rachel Smith
⇧ ⇧ ⇧Who runs the world? Girls!! ⇧ ⇧ ⇧
WEBSITES FOR DAILY INSPIRATION AND LEARNING:
- Codrops — a blog with an overwhelming amount of resources for learning and implementing code
- Codepen — a playground where you can write code, play with other people’s code, fork things, save things, share things.
- CSS Tricks — awesome resource, awesome blog for learning and getting ideas that you can implement.
- Awwwards — super advances and inspiring websites
- FWA Awards — even MORE inspiring websites, on average a bit more complex than awwwards
6. Philosophy + Design Principles
Again, Val Head to the rescue. Here is her book, “Designing Interface Animation”.
And here is an article she wrote: http://alistapart.com/article/designing-interface-animation
And Sarah Drasner gives amazing lectures, here are her slides from a very in-depth one about motion workflow, branding, and concept: http://slides.com/sdrasner/style-guide-anim#/
Then check out the philosophies and principles of these companies:
7. More?! Here are some more misc articles
Not sure if this article helped you? Here is another article, just like it. Sometimes it’s good to hear the same material in two different people’s voices: https://desandro.github.io/motion-emotion/
And another article: http://www.hongkiat.com/blog/ux-motion-designer-freebies/
For After Effect lovers, try this plugin for AE called bodymovin. It’s free and easy to install from the Adobe app store. I installed and demoed it and it seemed very easy to use. Please let me know if you use it! Here are some demos to give you some ideas. And here is a blog post by the creator.
Thank you for reading!!
Eve Weinberg
