Animation Module — Decky, pt.2

Adaptive Automaton

As web applications come closer to matching the capabilities of native applications, one of the most exciting avenues of design that have opened up to us is that of animation. Animation, when executed well, offers a fourth dimension through which we can communicate with the user: time.

New CSS properties allow us to use animation to draw the user's attention through an application in a very natural way. By using principles of animation that have been honed over a hundred years, we can convey meaning and personality in ways that web designers have never been able to before. These new properties are easy to use, robust, and performant, blending seamlessly with existing CSS techniques.

One quick note: Many of the example animations in this article have been slowed down to show detail. All of the animations throughout Decky are 400 milliseconds long or shorter. Also, I learned a lot of the techniques I used on Decky by reading Designing Interface Animation and A Pocket Guide to CSS Animations, both by Val Head, and used Mozilla's MDN as a reference.

Watchful Automaton

In addition to showing Magic decks or cards "loading" into the screen, we can convey important information to the viewer. The deck thumbnails show the deck's composition by default, but hovering over them displays a more detailed breakdown. Clicking on the deck shows a faux-loading animation to convey to the user that we've received their request and we're working on showing them the deck.

We also leverage animation on the deck listing page selector to tie Decky's diamond motif into the overall branding. Additional animations are used to respond to the user hovering over interactive elements like buttons or clicking into an input field. These animations are each opportunities to create consistency in the look and feel of the application and to give the sense of attention to detail that is usually reserved for native apps.

Augmenting Automaton

On the subject of animation revealing additional information, a few Magic cards have two sides. Where in the past we would have to show those sides next to one another, now we can show them as they look in real life using an animated 3D effect.

A few fun effects are also used on the card listing to give the feeling of playing Magic as a physical card games. Cards are "dealt" onto the screen when the user hovers over their names using a very quick and smooth fading, rotating, and sliding animation.

Foil cards, also called "premium" cards, are one of the most popular ways to "bling out" a Magic deck, so having a special treatment for them in Decky only made sense. Therefore, we give them their own 3D hovering effect and an animated foil effect that simulates the way light hits foil cards in real life.

The final, and perhaps most important feature of animation on the web is the ability to turn it off. Using a few simple CSS rules and a bit of JavaScript, we make it possible for the user to disable animation throughout the application. Animation can cause motion sickness for many people and some simply don't like it. Furthermore it has a non-zero effect on performance so users on lower-end PCs may want to disable it. For this reason, we offer a simple checkbox in the Settings page with which the user can disable all of these effects.

The next article in this series will deal with just this predicament: web accessibility. If you want to read the previous article in this series, you can find that here.