Recently we added our first animated icon to Superhuman as part of the transition to the search interface:
There’s clearly more work to be done here, but you get the idea: the icon animates to enforce the perceptual link between the user’s click and its effect, while the text flicks right to draw the user’s attention to the now visible textbox.
While the text transition can be achieved easily using translate, opacity and transition in CSS, making the icon morph from a magnifying glass to a cross requires significantly more work.
We did this by writing a simple program that can draw the animation into an HTML canvas. The advantage of this approach is that we can re-use d3’s easing and scaling functions, and run the animation at any size or speed.
requestAnimationFrame and rendering each frame takes significantly less than 16ms of CPU-time.
The idea is relatively simple, and borrowed from how pre-digital motion pictures work. We just paint a strip of ‘film’ and pass it in front of an opening really fast (at 60 frames per second). This can be done using a stepped CSS animation:
Here’s the actual ten frames of the icon we’re using right now. Hover over it to see how it works in slow-motion:
This gives us the best of both worlds: We can develop animated icons interactively using canvas and test them at various speeds and scales; and when we’re happy with the result webpack automatically builds the GPU-ready SVG versions that are used in production.
I’d love your feedback and comments, please get in touch [email protected]. I’m particularly looking for a lead designer who can make Superhuman the most delightful email experience in the world.