Tweening

Tweening is a technique that I noticed for the first time in products like Flash and ImageReady many years ago. It allowed an animator to set a start and end state of an object and determine the number of frames in which the transition between the two states should happen. Individual states were then automatically calculated and not manually created through object duplication or other inefficient means, which often led to a smaller file size. So finding ways to convert at least part of the animation in tweens could have been considered as an optimization.

Today, we have CSS transitions and animations, which are now GPU accelerated. Transitions are linear and similar to tweens, only that we don't set a number of frames, but the time in which the transition must happen. We have a set of animatable properties that could help us manipulate the behavior of an element. But really interesting effects can occur when we combine multiple properties and animate them together. The first example that comes to my mind to illustrate this is from a demoscene called "bouNCE", presented at Breakpoint2004. At the point in time 1:36, we can see many levers that end with plains that together form something like a box. As that box gets rotated left and right, different levers start to move back and forth and opacity changes rhythmically with the music. The fact that some levers moved backwards and other forwards created a special relationship between them with the free space being constantly redefined. Such dynamic would have been impossible to achieve if we had animated only a single property. But it's also true that we have to be careful with animation online, because it can pull people's attention away from the content, especially if it is too complex. It might be a good idea to ask ourselves how predictable that animation is, because this can make it interesting or boring for people. If they have seen the same effect on many other websites, they would not feel attracted to it anymore. So the effect of animation is always relative to what other animations currently exist. It doesn't need to exist if it can't fulfill our goal or has a purely demonstrative purpose.

CSS animations with the help of keyframes allow for non-linear movement, which makes them less predictable. If a rectangular element is initially rotating around one of its tops, but with time we move its pivot point across a random path (it doesn't need to be inside the closed surface), we would get different result even if the speed of rotation remains constant. Individual keyframes could allow for more flexible movements, but the drawback is that every state needs to be defined to achieve this greater level of control. With too many keyframes and prefixes, we can quickly grow a CSS stylesheet to make it unrecognizable.

bit.ly/18qIfA5