When you hear “animation” you may be thinking about elaborate illustrations that draw themselves on scroll, or complicated menu animations. Animation can also be much more simple. Changing the color of a button on hover is animation. Displaying a drop-down menu is animation. Yes, the complicated stuff is more poppy and fun, but a good front-end developer or designer also knows how to use subtle animations to improve user experience and the overall design of a site.
There are many different ways to animate
jQuery is slow, it’s not accessible or easily responsive, and as demand for more complex animation has risen, it has fallen behind. The introduction of CSS3 also played a role in making jQuery more obsolete.
CSS3 animation is great for simple animations
Front end developers tend to get excited about CSS3 animation. The newest version allows us to use transitions to animate properties (like color or opacity) over time. Keyframes allow us to string animations one after another. Some CSS animations can be hardware accelerated, meaning the browser can use the GPU to render them, which allows for better performance overall. They’re easily made mobile friendly, either by use of percentage based measurements, or using media queries to have specific animations for each viewport size. CSS3 is king for basic animations on a site, like changing a button color on hover, or revealing a dropdown menu.
Despite all the awesome things that CSS3 animation can do, there are certainly limitations as well.
CSS doesn’t provide a means to control an animation. In order to test an animation while you build it you have to watch the whole thing and then reload. There is no way to “skip to the middle” or reverse an animation in order to test it. This does limit user interaction. You cannot build an interactive GUI or game easily with CSS animation.
Timing certainly becomes an issue with more complicated animations. For simple animations, CSS is probably your best bet, and we can use keyframes to line up several animation points. However, keyframes are limited to percentages, rather than time, in terms of duration. Issues stemming from this really add up if you ever need to get specific about timing with your animations. There simply is no way to say “I want to move this rectangle right for 2 seconds, then move it down for 1”.
CSS animations also do not play well with SVGs or scalable vector graphics. As high resolution displays become more popular, vector graphics are becoming more important. Furthermore, they are a great solution for responsiveness since they are so small in terms of file size.
Regardless CSS animation can be a solid choice
I am not suggesting we forget CSS animation and move on though. There are definite cases where it is the best and easiest library to accomplish our goals. It’s very easy to learn, the performance is good, and it requires no outside dependencies. With SCSS or another CSS preprocessor we can make variables and mixins that make our job even easier.
Why did I choose Greensock as my go-to?
GSAP (the GreenSock Animation Platform), is about 20x faster than jQuery, and even faster than CSS3 in some cases. Although it can be used in conjunction with CSS3 animation, the library actually has the ability to manipulate CSS properties in it’s functions.
GSAP also makes it easy to line up your animations into timelines. Animations can be chained together, and you can start a new one before the previous ones are finished. This, CSS3 cannot do. In addition, thanks to built in functions for pausing, reversing, seeking, etc., it is easy to make animation controls.
GSAP also has a large variety of eases to use, in addition to being able to manipulate separate properties at the same time. Rather than basing eases the gravity-less void of the internet, also have the ability to animate things based on earth physics.
All of this is awesome, but it gets better, because GSAP has plugins. The ScrollTo plugin can handle scroll controlled animations. The DrawSVG plugin can hide and reveal SVG strokes to make them look like they are being drawn as part of the animation. MorphSVG can turn any SVG shape into another SVG shape over a timeline. The Text plugin can animate text content, even down to individual letters. Obviously, this is much more than you can do with CSS based animations. This opens up a whole realm of fun possibilities for a website!
There’s always more out there!
Although I’ve only discussed three types of animation we can use, there are many more. CSS3 and Greensock are the ones that I always keep in my back pocket for projects. The web is constantly changing and growing though, and we can only guess what awesome animation tools will be available to us in the future!
If you want to check out some neat animation stuff, I recommend Matt Pearson’s art. His work is responsible for getting me in to animation when I was in college (then using a language called Processing).
Want some cool animations made for your site? Contact us to do a consultation!