This animation demonstrates anticipation through changes in both the x-position and rotation properties. Before the email icon flies off to the right, it moves slightly to the leftand rotates clockwise ever so slightly. Notice how the animation curves for these properties are almost identical, and the value graph never flattens completely. Even at its slowest, the movement remains constant, giving the animation a dynamic quality.

This animation shows a classic example of oscillation. The bell’s rotation displays a declining oscillation as it gradually comes to rest. Subtle oscillation like this adds an extra layer of life to animated objects and gives them a natural feel as they settle.

The iPhone animation highlights overshoot in two ways. When the hand holding the iPhone enters the screen, it overshoots its final position slightly before settling back. Similarly, the blue rectangle in the background overshoots on the x-position before adjusting. While this example focuses on position, overshoot can also be applied to scale and rotation for equally effective results. Combining overshoot with other principles such as easing and oscillation, creates animations that feel natural and visually satisfying.

In this text box animation, offsetting adds a human touch. Each line of text follows the same animation curve, but the layers are offset by two frames. This minor adjustment makes the animation feel more organic and visually engaging with minimal effort.

This rhombus swipe transition is a simple yet effective example of easing. The exaggerated ease-in and ease-out in the graph editor curves create a smooth motion. The shape layer is split, with the rhombus scaling from different anchor points on each layer. If the animation curves were both to appear on the same graph one after the other, they’d form a sharp-peaked mountain. This use of easing softens the transition between shots, making a “hard cut” less jarring.

In the laptop animation, details like speed lines when the laptop flies in, impact lines as it lands, and click lines from the cursor serve as examples of secondary action. These small embellishments add depth and polish to the animation, much like garnishing a dish to enhance its presentation.

Timing refers to the duration between keyframes, often measured in frames or seconds. In this car animation, two keyframes on the x-position are spaced about three seconds apart. This extended duration allows for a drawn-out ease-in, mimicking the gradual acceleration of a car starting to move. Balancing timing with animation curves (spacing) gives animators control over the pacing and feel of the animation. 

The jumping speech bubble icon in this animation demonstrates squash and stretch, emphasizing speed and impact. When squashed on one axis (e.g., x), an equal amount is stretched on the other axis (e.g., y) to maintain consistent volume. For example, if the x-scale is 110%, the y-scale should be 90%. This attention to detail enhances the illusion of flexibility and impact.

The paper plane animation demonstrates the principle of arcs. The plane moves along a smooth curved path, as does the dotted line trailing behind it, illustrating the flight path. Motion on arcs or curves is generally more visually appealing than straight-line movement and creates a sense of elegance.