{"id":4365,"date":"2025-04-01T03:00:43","date_gmt":"2025-04-01T03:00:43","guid":{"rendered":"https:\/\/lollypop.design\/?p=4365"},"modified":"2026-05-20T11:55:52","modified_gmt":"2026-05-20T06:25:52","slug":"the-forgotten-art-of-spacing","status":"publish","type":"post","link":"https:\/\/lollypop.design\/blog\/2019\/march\/the-forgotten-art-of-spacing\/","title":{"rendered":"The Art of Animation: Understanding Timing and Spacing"},"content":{"rendered":"

\u201cAnimation<\/span><\/i> is not the art of drawings that move, but the art of movements that are drawn. What happens between each frame is more important than what exists on each frame.\u201d\u00a0<\/span><\/i><\/p>\n

These words from <\/span>Norman McLaren<\/b>, a pioneer of hand-drawn animation, perfectly capture the essence of animation. But what did he really mean?<\/span><\/p>\n

For an object to appear in motion, it must change position over time. The way we control the speed and degree of change between frames is what creates the illusion of life. Two fundamental principles of animation bring this illusion to reality: <\/span>timing and spacing<\/b>.<\/span><\/p>\n

In this blog, we\u2019ll explore Timing and Spacing<\/a><\/strong> in animation\u2014what they are, why they matter, and how to apply them effectively to bring your animations to life.<\/span><\/p>\n

Let\u2019s get started!<\/span><\/p>\n

Timing Animation<\/b><\/h2>\n

1. What is Timing in Animation?<\/b><\/h3>\n

Timing in animation refers to the speed at which an action takes place, determined by the number of frames used for movement. More frames make the action slower and smoother, while fewer frames create a faster and snappier motion. Proper timing helps animations feel natural by reflecting real-world physics.<\/span><\/p>\n

2. What is an Animation Timing Chart?<\/b><\/h3>\n

\"Timing<\/p>\n

An <\/span>Animation Timing Chart<\/b> is a visual guide used by animators to plan how an object\u2019s movement progresses between two keyframes. It helps control both <\/span>timing<\/b> (when an action happens) and <\/span>spacing<\/b> (how far an object moves between frames).<\/span><\/p>\n

The chart typically consists of a straight line connecting <\/span>point A<\/b> (starting position) to <\/span>point B<\/b> (ending position), with evenly or unevenly spaced marks in between representing individual frames. The closer the marks are, the slower the motion; the farther apart they are, the faster the motion.<\/span><\/p>\n

By using a timing chart, animators can create smooth, controlled movement, ensuring that acceleration, deceleration, and other motion principles are applied effectively.<\/span><\/p>\n

3. Key Factors That Influence Timing in Animation<\/b><\/h3>\n

To create natural and engaging animations, designers must carefully apply timing based on key factors that influence movement. Here are 3 essential factors to consider:<\/span><\/p>\n

    \n
  1. Weight: <\/b>The timing in animation should reflect the object\u2019s weight. Heavier objects take more time to start, stop, or change direction, requiring more frames to show their momentum. Lighter objects, on the other hand, move more quickly and require fewer frames.<\/span><\/li>\n
  2. Scaling Properties:<\/b> Larger objects often appear to move more slowly due to their mass, while smaller objects can move more quickly.\u00a0<\/span><\/li>\n
  3. Determining Emotion: <\/b>Timing also helps convey emotions by adjusting the speed of movement. Fast motions indicate excitement or anxiety, while slow movements express calmness or exhaustion.\u00a0<\/span><\/li>\n<\/ol>\n

    Learn more: UI\/UX design definitions and processes<\/a> to expand your knowledge and apply them to your projects.<\/p>\n

    Spacing Animation<\/b><\/h2>\n

    1. What is Spacing in Animation?<\/b><\/h3>\n

    Spacing in animation refers to how the position of an object changes from frame to frame. It controls the smoothness of movement. By adjusting animation spacing, animators can create different motion effects, making animations feel more natural and dynamic.<\/span><\/p>\n

    2. Types of spacing in animation<\/b><\/h3>\n

    \"4<\/p>\n