Stas Aki

Stas Aki is Readymag’s product designer.

He started out as a graphic designer in the

Art. Lebedev Studio and later co-founded the

SILA project group.

stasaki.com

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.

Val Head

The Ins and Outs of Easing

dotCSS, 2016

I prefer cartoons with super-primitive graphics and limited color palettes, such as the work of the British artist Phil Malloy and David Lynch’s series of short films DumbLand. The deliberate stylistic asceticism of these works brings to the fore the animation component. By the way, Lynch made DumbLand with Flash and a mouse.

I like how Charles and Ray Eames used animation to show the entire universe, macro and micro, in their short film The Power of Ten.

Lately I often turn to work by the Wolff Olins agency—their Instagram includes many spot-on videos.

I love animated typographic posters. Among the many designers who are now experimenting in this field, I would single out the Swiss Studio Feixen.

Charles and Ray Eames

Powers of Ten, 1977

Phil Mulloy

Cowboys: High Noon, 1991

A film—especially when it's a personal film—
is going to hit somebody or it's not. There's nothing you can do about it. David Lynch

David Lynch

Dumbland, 2002

Readymag has never thought of itself as a kind of powerful animation machine, but, over time, animation has become one of our central features. We saw that it makes it possible for users to create interesting, beautiful, considered, and contemporary websites. Once aware of the need, we began to develop our animation capabilities consciously and intendedly.

At first, Readymag had only preset animation settings for moving between pages and preset transition effects in the widgets (this is what we call all components on the page). But in early 2016 we began to offer animation as an independent feature that might be applied to any widget. At the same time, we tried to make the creation and use of animation in Readymag as simple as possible and didn’t even introduce standard timeline editor in the interface.

In that same year, too, we launched triggers that let the user start animation on one widget by committing actions on any other widget. Our users began to employ these new possibilities very inventively.

For the future, our team is concentrating its efforts on developing animation in mobile format—the browsers in today’s smartphones allow many more possibilities than were available just a few years ago. We are also continuing to widen the functionality and improve the performance of animation in published desktop projects.

Animating with Readymag

The main idea that I want to get across in this piece is that we designers can do web projects that are interesting and visually rich without indulging in prettifying frills.
I did several layouts of each page and then considered how to put them together in such a way that one seemed to flow from the preceding as soon as it was scrolled down.

It may sound odd, but when thinking about animation for my own projects, I don’t take my inspiration from cartoons but from movies. My preferences were formed under the influence of Orson Welles, Jean-Luc Godard, Peter Greenaway, and Sergei Parajanov—tireless seekers of a new visual language for the cinema. That is how I am proceeding: experimenting with animation and seeking a new language for the web. I don’t impose animation on content but seek to make it an integral and essential part of the visual narrative.

So, to all who are interested, I recommend that you make your own video, editing it on iMovie or Final Cut Pro. The actual experience of editing gives you a good understanding of what it is to work with material that develops in time.

You must torment people with your artistic delight, scaring mother and grandmother in the middle of the night. Sergei Parajanov

Sergei Parajanov

The Color of Pomegranates, 1968

Daniel Bird

Making The Colour of Pomegranates, 2011

You have all got mobile phones, you have all got
cam recorders, and you've all got laptops, so you're all filmmakers. Peter Greenaway

Saskia Boddeke & Peter Greenaway

Obedience, 2015

Peter Greenaway

Cinema is dead, 2017