Animation
Summary
▪ Employ motion to emphasize, provide feedback, and add interest
▪ Primary toolchain includes Illustrator, After Effects, and Bodymovin, actualized via Lottie
▪ Information design and data visualization enhanced with motion using D3.js and p5.js
As the technology around animation for the web has developed, so has the potential to enhance users’ experiences. The canvas element and SVG support mean that we can easily add motion to virtually any aspect of a web application - not that it’s advisable. Perhaps more than other technologies, animation is best used judiciously and thoughtfully. I like to animate to emphasize, provide feedback, and add polish to microinteractions.
I mostly employ animation in native and web applications. My current toolchain is Illustrator (for the base vector) > After Effect/ Bodymovin (for animating the vector and exporting JSON) > Lottie, the result being a high quality, flexible animation ready for the web. I also use vanilla CSS and JavaScript when they are more suited.
Lottie makes animation easy
Lottie animations in their various stages, and example of the JSON generated by Bodymovin.
We used subtle animations for data visualization in this sport-focused analysis application.
I attended a workshop and design course on the Processing language at the O’Reilly Design Conference in San Francisco. Processing promotes software literacy within the visual arts and visual literacy within technology.
A Bézier curve in p5.js.
For something less involved, the native animation features of CSS work.
Animations via CSS.