The State of Web Animation: Part 1

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

Video

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.

Gifs

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.

SVGs

SVGs are pretty powerful as an image type, as Chris Coyier would agree. They’re vector graphics that can be stretched as large as you’d like without losing quality and without increasing file size. Pretty awesome. But part of the magic of SVGs is not just their lossless quality, but they can also be animated in every way that HTML can (with CSS and JavaScript). If you use your SVGs inline in your HTML, that is.

Status: Inline SVGs are supported in all modern browsers, but not in IE less than 9. Watch out for odd side-effects in older IE versions (SVGs register as invalid HTML). See support for CSS and JavaScript animation depending on your method of animating your SVGs and their child elements.

Best use case: Can be used for User Interface animation (using CSS Transitions) or more sequential, narrative animation (using JavaScript + CSS). It is particularly useful for compositions and animation that must adapt to screens of all sizes.

SMIL

At one time, there were also specifications being set and implemented for a separate mark-up language called SMIL which could be used for SVG animation. However, as of this writing, SMIL is dead. It’s a bit of a shame this is gone, since SMIL had more capabilities for manipulating the coordinates of paths and shapes directly. There are plenty of SMIL workarounds and add-ons in CSS and JavaScript if you really need to achieve those effects though.

CSS Transitions

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.

JavaScript

Animation methods through JavaScript have blown up in recent years, making this a huge topic unto itself. So, I'll be following up with a Part 2 so I can walk through a variety of those libraries and tools in some detail. Spoiler: don't use jQuery's .animate(). Stay tuned!