demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Archery contest in Brave

Core Animation Concepts: Anticipation and Follow-Through

css / animation

Estimated reading time: 2 minutes

We can create more realistic on our pages by using principles established by classical animators, such as the “Nine Old Men” of Disney, and even earlier, from the antecedents of Greek theatre.

Anticipation is the motion before a main action sequence, usually in the direction opposite to the main action: think of a baseball pitcher winding up to throw a strike, or an archer drawing a bow. Anticipation builds momentum and tension to your animation, telegraphing the action to come to the audience. Moving an element down (“antic down”) implies that the main action will be upward; “big antic” in one direction usually precedes large, swift motion in the opposite direction. 

Anticipation and follow-through in a bezier curveFollow-through is the recovery portion of the movement, after the main action sequence; think of the motion of that baseball pitcher immediately after the ball is released.

Both of these concepts tie into using exaggeration to show extremes of motion that would not occur in real life. (Note that the degree of exaggeration is an artistic interpretation, rather than a natural physical property: historically Disney uses subtle exaggeration, whereas houses like Hanna-Barbera used it to extremes). Ease-in and ease-out, previously discussed, also play a part.

To recreate these principles in , we can introduce values for our Bezier timing functions that are negative and/or greater than 1. This creates an S-shaped Bezier curve, as you can see to the right, and the CSS transition code below:

Merida
Example of anticipation and follow-through in CSS3 animation

Used for a simple transition on hover (note that the code below lacks vendor prefixes):

img#merida {
width: 114px; height: 114px; margin-left: 50px; border-radius: 6px; overflow: hidden; display: block;
box-shadow: 6px 6px 4px rgba(0,0,0,0.3);
transition: all 1.3s cubic-bezier(0.500, -0.440, 0.670, 1.475);
}
img#merida:hover { transform: translateX(500px); }
comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.