The State of Web Animation: Part 1
Megan Zlock, Former Front-End Development Director
Methods for layering animation onto your site — from old stand-bys to bleeding-edge techniques. Starting with the stand-bys.
We’re now well into 2018 and I’m thinking it’s time for a check-in. A lot has happened in the world of the web in the last few years, so let’s review a bit:
Responsive Design is now the norm. Clients know what User Experience Design is now and not only respect it but expect it on their projects. Concerns for Web Accessibility are growing. Internet Explorer is all but dead and browsers are in a state of constant improvement without being locked into one version or the other. Overall, I’d say things have really taken an amazing turn for the better (for developers anyway). Now that we’ve begun to cover the basics of the availability and understandability of our content and tools, what’s next?
I like to think the next era can focus not on technology, but on how we can make the web feel more like our natural world. And don’t worry, I’m not talking about skeuomorphism; I’m talking about motion.
Smarter people than I starting talking about this subject back in 2014. Basically, it starts with the observation that the web is not like the real world. On the web, it’s normal for things to appear, disappear, and move abruptly and instantaneously. Is that normal in the real world? Not really. Therefore, animated experiences just feel better. And this isn’t just a vague principle or intuition either. Statistics support that animated experiences (video in most studies) increase engagement and understanding.
In fact, you’re less likely to read my writing than watch a video, so here’s some animated statistics from motion design firm 23i:
Note: These statistics apply to product video product explainers primarily.
Animated experiences have already skyrocketed, but as time passes we have more and more methods and ability to create these experiences. Especially with the latest and greatest browser improvements (and the downfall of IE). So, let’s review our latest options and implementations...
This one is a no-brainer. People have been animating for film and video for decades and it’s an easy add-on to your website, if you’ve created the content already. Drop in a YouTube or Vimeo embed and you’re set. Video works in almost all browsers, even if you decide to use an HTML5 video instead of a plugin-and-play embed. Just make sure you have the content to fill some time before you commit to a video. No one likes to have their time wasted on filler.
Status: Supported in all major browsers. It does not work in Opera Mini (notable for international sites) and HTML5 video does not work in IE less than 9.
Best use case: Explainer videos, more engaging media for copy and content.
They’re amazing for your Slack channel, but be careful using them on your website. Gifs are great, but they become huge files very quickly and just aren’t performant. Use them within your content, like within articles, but some other file formats might work better.
In recent studies, mp4s have been determined to be 5 to 10 times smaller than a corresponding gif. It's not uncommon to get a file that is 90% smaller as an mp4! With that kind of file savings, it's no wonder some sites are switching to other file formats. Twitter converts your gifs to mp4s, Imgur has adopted the more performant gifv format, and Giphy of all places will use a newer webp file instead of a gif (at least in Chrome).
I would personally advocate for the mp4 because there's just so much you can do with HTML5 video. Seriously, just check out the docs.
Status: Available everywhere images are supported (so, everywhere).
Best use case: Occasional use in content, but really, switch to mp4s.
The first thing I have to say about CSS transitions is: use them. Transitions make hover states and interactions feel much more fluid and understandable. Having a menu slide out from the left gradually creates a much better sense of real space than if the menu were to just appear.
We’ve gotten to a state with CSS transitions where not only are transitions possible in all browsers (down to IE10), but we can be highly expressive with them and we can provide much better user feedback with small little shakes and jolts. Rebecca Ussai very aptly calls this type of animation UX Choreography, which is not only expressive but aids the user’s understanding of your interface. These movements can also further define the brand of the site, either by adding quickness and energy or by keeping to slower, standard fades and slides.
You can animate most CSS properties, but generally it’s best to stick with animating opacity and transforms (rotate, scale, and translate) for the best frame rate and repainting performance.
Val Head is an amazing speaker on this subject, so I’ll let her fill you in from here.
Status: You should have added this to your site 3 years ago -- now get creative! CSS transitions work in all modern browsers, but not Opera Mini or IE less than version 10. CSS transitions fall-back incredibly well though, so the tiniest lack of support for the feature should not deter you in the slightest
Best use case: User Interface movement and feedback, a.k.a. UX Choreography
CSS Keyframe Animations
While handy, keyframes don’t enable much more functionality than default CSS transitions. They allow you to have more control over the progression of several properties over the course of an animation, but you still can only apply transitions to one element as opposed to a group of elements which might have related animations. You can make CSS Keyframe animations loop though, which is something!
Animating SVG: CSS
As mentioned before, SVGs can be animated with CSS, just like you would animate HTML. They're both mark-up languages, after all. You might have to use the fill property instead of color and a few other syntqax differences, but overall it works the same.