DailyJS

Interview: The Future of Web Animation with Julian Shapiro

2015-05-15 14:40:15 +0100 by Alex R. Young

Developer and startup founder, Julian Shapiro, has had an impact on the JavaScript world. We've covered a few of his web development accomplishments in the past: we wrote about the launch of Julian's text manipulation library, Blast.js, in addition to the work he's best known for: Velocity.js and Velocity.js' UI pack. The Velocity JavaScript animation engine is a top-ranked library on GitHub, with users including WhatsApp, IBM, Tumblr, Yahoo! and many others.

After receiving a grant from Stripe for his work on Velocity, he also built the fascinating Libscore, the community goodwill project that helps developers compare the relative popularity of web frameworks and third-party libraries. Recently, Julian wrote Web Animation using JavaScript for Pearson.

In our interview with Julian, we address the future of web animation, and the role JavaScript might play in it.

Julian Shapiro

DailyJS: What makes animation exciting in 2015—compared to the older Web 2.0 animation libraries?

Julian: We have faster browsers today, and they're only continuing to get faster at an impressive rate. The Chrome team, in particular, also happens to be aggressively pushing to standardize browser behavior on Android. Those two factors, combined with the increasing computing power of mobile devices, means that Web animation performance will continue to improve -- even if developers' implementations stay stuck in old ways. The other predominant trend in web development performance is simply its broader awareness, along with the increased importance being placed on it. Fortunately, performance is no longer a second-class citizen in web development education and industry news outlets. With broader awareness comes broader implementation and deeper understanding of best practices. Since there is a lot of low-hanging fruit that can be picked in web performance, this too will result in significant gains in site performance and usability in the coming months.

All of this leads to a performant base web development platform upon which beautiful and fluid animations can be layered. The higher we can push animations to perform -- across all browsers and devices -- the sooner the slick motion design commonly found in mobile apps will exist without compromise on the Web.

DailyJS: What trends will we see in the future of Web animation?

Julian:We might see a wave of too-clever and overused motion design in web user interfaces. Are you familiar with those awesome-yet-crazy After Effects-produced motion design examples on Dribbble? Those will become a technical reality on web pages soon enough. Like all things, however, I think the wave will peak then collapse, and we'll settle into a happy medium of quality user experiences bolstered by motion design that doesn't detract from usability.

In terms of trends, the inevitable growth of React Native might mean we'll also see a large shift in the tooling landscape toward the React ecosystem. I wouldn't be shocked if React is the future of web programming as we know it. If this turns out to be the case, animation engines will have to follow suit or they'll otherwise become irrelevant.

DailyJS: What type of animation works best in JavaScript, and what type works best with CSS?

Julian:In terms of common interface animations, CSS is best suited for simple element state-based animation, e.g. hovering, clicking, etc. As for intricate loading sequences, JavaScript animation is typically better suited.

When it comes to more complex motion design, such as page and element scrolling, physics-based motion, and touch and drag capabilities, JavaScript is the only realistic solution. I don't foresee this dichotomy changing any time soon.

Mozvr

Animation may very well permanently shift toward the realm of JavaScript as the ecosystem develops. Animation is too important of a UI design component to be relegated to the minimal programming logic of CSS (as is dictated and updated on an irregular basis by a standards body). JavaScript, in contrast, inherently allows a developer to layer an infinite amount of logical control over animation, and that power will prove valuable in ways we have yet to imagine. (Browser-based VR, anyone?)

DailyJS: What animation anti-patterns should developers and designers be aware of?

Julian: Utility and elegance are the goals of all great Web animation. Great animators deliberately choose every aspect (e.g. easing, target properties, duration, and so on) of their seemingly arbitrary animation sequences -- because they want to reinforce the intentions of a UI, and that's a very calculated decision. Whimsical motion design, in contrast, is not only inconsistent, but it also appears inelegant and diverting to the user.

The sad truth is that -- while there are hundreds of tutorials on the minutiae of UI design -- there is very little education on motion design. They're both very important aspects: Whereas UI design lays the structural foundation for interacting with a web page, motion design enriches that foundation with the furnishing and decoration that make the page usable and comfortable. If you allow me to be metaphorical for a moment, furnishing is the utility that motion design serves, and decoration is the elegance it provides. Great apps leverage both utility and elegance to make the user feel like they're interacting with an interface that's living, breathing, and tangible. In contrast, an interface that's devoid of motion design reminds the user that she's simply dragging a cursor across a screen or tapping her finger on a piece of glass. In other words, a web page without motion design can make the user painfully aware of the artifice before her.

With that context out of the way, common anti-patterns include:

I've written a lot about these theoretical aspects of motion design in my book, which also dives into the topics of animation performance and animation workflow.