12 Basic Principles of Animation

Let’s begins with the basics of animation from The Illusion of Life by Frank Thomas and Ollie Johnston, who worked at Disney as animators, they defined the foundations of animation in 12 concepts.

Squash and Stretch:
Giving a physicality to elements so the motion is dictated in a consistent state of physics; realistic or imaginative. Pulling and pushing a visual, sometimes bouncing.

Anticipation:
Preparing a user for a change in visual state or large shift in presentation. Signaling through light motion before a bigger action happens.

Staging:
A clear state or direction for the user on what is happening, easy to identify at a quick glace. Reference to theater or spotlight focus on a component.

Pose to Pose or Straight Ahead:
Building the key frames by programming the transition between them so it feels natural in the product.

Follow through:
Components with multiple parts can react to the motion by continuing and snapping back when the component breaks into place.

Slow in & Slow out:
Easing in or out of an animation, changing the value’s over time to enter with a lower value over a longer time or enter faster with a lower value. Visualized as a graph with Y of time and X as value.

Arcs:
Giving the entrance or exit of a component a curved path or change in positioning from start to finish, giving it personality.

Secondary Action:
Action that reacts to an entrance or exit. Component entering collides with another, the content inside responds by moving too but at a staggered or reduced motion.

Timing:
Slow actions when a user is required to wait for a server response(or related scenarios) and faster actions when components/data are being populated.

Exaggeration:
Making the component’s animation larger than life to call attention or show it’s purpose sometimes giving it scale, extra squash/stretch, etc.

Solid Drawings:
3D can give weight and prominence to components when animating.

Appeal:
Define an physical environment for the components to react in when determining gravity, weight, movement, dimension, etc to get users engaged and directing them around the product. Makes components appear interesting.

The video shows the visuals of animations by giving a cube personality through all of the rule sets.

The illusion of life from cento lodigiani on Vimeo.

Here are some CSS animations that cover the basic principles of animation, squishy squishy buttons!

Building basic animations principles concepted by Disney Studios

Motion, when defined consistently in visuals will convey the intentions of the work presented to the viewer/audience. These concepts can be built in any medium that includes a time component: video, animation, motion design, games, web, apps, music video, etc.

Web Animation API (WAAPI)

Allows for a synchronizing and timing of websites for animating DOM elements. The Timing Model and Animation Model are combined in this API so browsers have a common language for animations.

A few stumbles for translating animations from CSS to WAAPI. Avoid pseudo element animations and focus on the component/element level of animation. Be aware of how the animation impacts elements it’s applied to by testing different presentations and states. Static animations that maintain a component’s integrity when applied don’t need to use WAAPI, if it doesn’t change a lot keep it in CSS. WAAPI requires a polyfill for newer features but you can use the first implementation in Chrome and FireFox. Later features are in the polyfill and very much worth trying.

Reasons why you want to consider WAAPI. If there’s a need to update the animation on the fly with randomized/generated values, this is perfect. You won’t need bloated SCSS/Sass mixins and functions that generate a lot of code. Building out an animation timeline that needs dynamic responses based on user input. WAAPI still uses the benefits of CSS performance optimization. You can handle animations in JS without statically setting up animations in a stylesheet that can’t be updated without JS or changing/updating the stylesheets. Live in the future today.

WAAPI animate method

The first method you can start using is Element.animate(). Let’s break down the key frames and options: element.animate(keyframes, options). keyframes can be an object or array of object key-value pairs for animating element styles.

element.animate([arrayFrames] || {objectFrame}, {options}) method creates a new Animation object instance to build out the frames needed for your animation. The frames are positioned according to where they are in the index order [0%, 100%] || [0%, 33%, 66%, 100%] you can define offset in the frame to position the frame in the timeline.

CSS animations:

.class-thing {
  transform: scale(1, 1);
  animation: 4s infinite squash-stretch; 
}

@keyframes squash-stretch {
  92% {
    transform: scale(1, 1);
  }
  94% {
    transform: scale(1.75, 0.5);
  }
  100% {
    transform: scale(1, 1);
  }
}

Web Animation API animations:

element.animate([{
   transform: ‘scale(1, 1)’
 }, {
   transform: ‘scale(1, 1)’,
   offset: 0.92
 }, {
   transform: ‘scale(1.75, 0.5)’,
   offset: 0.94
 }, {
   transform: ‘scale(1, 1)’,
   offset: 1
 }], {
   duration: 4000,
   iterations: Infinity
 });

Moving the start of the animation from CSS portions that might not cascade properly in larger products into the JavaScript help with unique and componentized approach to motion design in web/apps. A big thing to note is you need to use the same styles frame to frame for the first implementation of WAAPI, this issue gets resolved in the polyfill and next implementation.

This can throw an error! ACK!

element.animate([{
   transform: ‘scale(1, 1)’,
   //The backgroundColor isn't in any other frame and will throw an error with WAAPI, careful!
   backgroundColor: 'red'
 }, {
   transform: ‘scale(1, 1)’,
   offset: 0.92
 }, {
   transform: ‘scale(1.75, 0.5)’,
   offset: 0.94
 }, {
   transform: ‘scale(1, 1)’,
   offset: 1
 }], {
   duration: 4000,
   iterations: Infinity
 });

.animate Options

Check out the animate method options at MDN or the W3C spec, version one is currently working in a few browsers but recommend using the polyfill for better feature support. I’ll note a few issues with options in the first implementation that are/will be resolved in future updates and currently with the polyfill. Can’t access animate options after construction but you will be able to with element.animate(frames, options).effect.timing. Delay evaluates 1000 and '1000' the same in Chrome and FF but duration only accepts integers.

Multiple Animations

Building out multiple animations dynamically using JS. You can see in the example the delay is built to stagger the animations and the delay is updated when the user clicks an image and it resets the animation to the start. When updating the animation frames they don’t overwrite the entire frame but the property.

The images fly in from the side and when finishing the animation a class is removed and you can control the timing on the NodeList of images while resetting or updating the options and frames dynamically!

Thanks for reading and if there’s anything I should update let me know. I’ll be exploring WAAPI even more :D
Sources/credit:

Rachel Nabors — Alice in Web Animation Land
Val Head — What Disney’s Classic Animation Principles Could Teach Web Designers
Daniel C Wilson — Animations Intro
Web Animation API — web-animations-js
W3C — Web Animation Spec