Designing Interface Animation
Timing (and Spacing) Really Are Everything
Timing and spacing together creates the the illusion of an animated object obeying the laws of physics.
Develop your own library of cubic-bezier curves, it allows you to be more expressive and custom in your animations.
A cubic-bezier curve consists of four values = (x1, y1, x2, y2)
An animation that has follow-through means it has so much energy that it overshoots its target and then settle into place. This can be represented in code with a bezier curve that goes outside the boundaries of its matrix.
Anticipation is pretty much the same as follow-through but in reverse. For an interface, an object can move back slightly before it charges over the screen, almost as if it gathers energy before setting off.
A secondary action is the complement to the main motion. A character that walks could also swing its arms, or whistle which informs the the walking movement.
Strive for having exaggeration in your animations. It makes the movement more noticeable. It also create hierarchy in a group of animations.
The animation-fill-mode CSS Property
This property will set the values of the animated element either to the values it has when it ends or when it starts. The values for the property are:
- None, Initial value
- Forwards, The element will keep the values from the last keyframe.
- Backwards, The element will keep the values from the first keyframe.
- Both, The element keeps values from both the first and the last keyframe.
Don’t Make Obstacles
Avoid designing beautiful obstacles. Animation isn’t helpful when it gets in the way of the user trying to complete a task. Menus should’t need to play out animations whenever they’re opened/closed. If it gets in the way of the user; get rid of it.
Avoid blocking animations that would require the user to sit through the animation without being able to interact with it.