Animation Timing Chart
Language:
Timing Controls
Number of Inbetweens:
Animation Spacing:
Frame Rate:
fps
Common frame rates:
- • 12 fps: Traditional animation on 2's
- • 15 fps: Web animation, some games
- • 24 fps: Film standard
- • 25 fps: PAL video standard
- • 30 fps: NTSC video standard
- • 48 fps: High frame rate film
- • 60 fps: High-end games, smooth animation
Time/Frame Converter:
Current frame rate: 24 fps
1 second = 24 Frames:
1 frame = 0.042 seconds
Description:
Even spacing throughout the animation.
Animation Spacing:
- • 1's: One drawing per frame (24 fps)
- • 2's: One drawing every 2 frames (12 fps)
- • 3's: One drawing every 3 frames (8 fps)
Understanding Bezier Control Points
What Control Points Mean:
X1, X2: Timing/speed
Y1, Y2: Spacing/acceleration
• Small X1: Slow start (Ease In)
• Large X2: Fast end (Ease Out)
• P1(0.33,0.33), P2(0.66,0.66): Linear
Common Curve Patterns:
(0,1)
(1,0)
Ease In-Out
Slow start & end
(0,1)
(1,0)
S-Curve
Smooth acceleration
(0,1)
(1,0)
Ease Out
Fast start, slow end
(0,1)
(1,0)
Bounce
Overshoots target
Chart Legend:
Keyframe
Inbetween
Spacing:1s
Inbetweens:5
Timing:linear
Control Points:(0.25, 0.50, 0.75, 0.50)
Bezier Curve Editor
(0,0)
(1,0)
(0,1)
(1,1)
Visualization Options
Animation Preview::
Animate Property::
Duration:: 2s
Paused
cubic-bezier(0.25, 0.5, 0.75, 0.5)
This Traditional 2D Animation Chart tool was developed to support animators in the frame-by-frame animation process, making timing planning easier and improving precision in every movement. Created by VisdevStudio, an emerging studio focused on innovation and excellence in both traditional 2D and 3D animation.
About Animation Timing
Traditional animation uses timing charts to plan the spacing between drawings. The spacing determines how fast or slow an object appears to move.
Timing Types::
- • Linear: Constant speed
- • Ease In: Starts slow, ends fast
- • Ease Out: Starts fast, ends slow
- • Ease In & Out: Starts and ends slow, fast in middle
- • Custom: User-defined Bezier curve
Animation Spacing::
- • 1's: Smooth motion, more drawings
- • 2's: Standard animation rate
- • 3's: Choppy motion, fewer drawings
Visualization Options::
- • Velocity Graph: Shows how speed changes over time
- • Progress Graph: Shows how value changes with time
- • Animation Preview: Visualizes the effect on different properties