Readymag Design Almanac: Animation

I grew up using Flash, which was at least a decade, maybe two, ahead of its time in terms of delivering rich interactive content for the web. It gave us video long before the web was ready to support it. Just recently, in the past couple of years, we’re seeing technology like JavaScript and CSS catching up to what Flash could do.

Back when I started, 20 years ago, animation on the web was absurd. It was ridiculously animated GIFs, people trying to make their site really fancy. What’s happened over the past five years or so is that we’re becoming more mature with animation on the web. We’re realizing animation is about designing with time, and time can be a really powerful piece of user experience. It connects one screen to another, helps users grasp the content they’re consuming, and helps build a geography of the application, so users understand where they’re at spatially.

The web design market has become extremely fragmented over the past five or six years. Designers really started to mature, moving to different tools to cobble together a robust workflow. They have Sketch, their primary tool, then they use After Effects to do animation; folks on the other end of this spectrum are using tools like Keynote to do animation. It’s really varied and creates a disjointed workflow. Switching back and forth between Sketch and After Effects is time-consuming and, at the end, you still don’t have something you can go out and test with real users. We’ve seen the same problem with freelancers who are just trying to crank out better projects for their clients up to really large enterprise clients who make constant iterations. So we saw it as a really big opportunity for the entire industry and created InVision Studio.

Web animation is a logical outgrowth of pre-internet media. The guiding stars of the 20th century were movies and television, and by the end of the century designers were deeply involved with animation in various formats—cartoons, cinema titles, commercials. As I see it, the chief thing that sets web animation apart is its interactiveness.

There are, in my opinion, two crucial moments in the history of web animation: the appearance of Macromedia Flash and the mass adoption of smartphones. The latter is of special interest. With touch-screen devices, the users interact with the interface with their fingers, a more natural kind of control than the manipulation with a cursor. Thus, with the help of animation, designers extend the normal actions and seamlessly transport the user from the real to the cyber world. Designers create virtual spaces that mirror the dynamics of the usual, physical world and, thus, they feel more natural. For example, when you open the panel with Wi-Fi settings in iPhone, the response happens at the speed of your finger moving across the screen. It is as easy as, and very much like, opening a drawer. What is more, you can stop the animation halfway to completion and reverse the action without taking your finger from the device. The latest web animations increasingly make it possible for the user to speed up or slow down, endowing digital elements with an imaginary weight.