Frame Rates in Animation: Why 12, 24 and 30 FPS Look Different

Learn what frame rate means in animation, how 12, 24 and 30 fps change the feel of motion, and how to choose the right one for your project.

Share on Linkedin Share on WhatsApp

Estimated reading time: 6 minutes

Article image Frame Rates in Animation: Why 12, 24 and 30 FPS Look Different

Every animation, from a hand-drawn short to a game cutscene, is built from still images shown in quick succession. How many of those images appear each second is called the frame rate, measured in frames per second (fps). It sounds like a technical detail, but it shapes the feel of motion: smooth, snappy, dreamy or choppy. This article explains the most common frame rates and how to choose between them.

Why frame rate matters

Our eyes and brain blend a fast series of images into continuous movement. The more frames you show per second, the more information the viewer receives about each movement, and the smoother it tends to look. Fewer frames give a more stylized, sometimes more graphic result. Neither is automatically better; each is a creative and practical choice.

The most common frame rates

Frame rateTypical useGeneral feel
12 fpsStylized hand-drawn work, limited animation, some web animationChoppy and graphic, with a handmade charm
24 fpsFilm and many animated featuresNatural, cinematic motion
25 fpsTelevision in regions that use the PAL standardSimilar to film, slightly different pacing
30 fpsVideo, web content, many gamesSmoother and more “video-like”
60 fpsGames, interface animation, fast actionVery smooth and responsive

These are common conventions rather than strict rules. Always check the requirements of the platform or client you are working for before you start.

Animating “on ones” and “on twos”

A key concept in traditional and digital 2D animation is the difference between “ones” and “twos”. When you animate on ones, every frame has a new drawing. When you animate on twos, each drawing is held for two frames. In a 24 fps project, animating on twos means 12 unique drawings per second.

  • On ones: maximum smoothness; ideal for fast movement, camera moves or delicate details, but more work.
  • On twos: the standard for much hand-drawn animation; it saves time and gives a pleasing rhythm.
  • On threes or more: a deliberately choppy style, often used for effect or in limited animation.

Many animators mix them. A slow gesture might be on twos, while a fast punch or a quick turn uses ones to avoid a jumpy look.

How frame rate affects workload

A higher frame rate means more frames to produce, store and render. Doubling the frame rate can double the number of images in a 2D drawn project, and it increases render time in 3D. That is why planning the frame rate early is essential: changing it late in production can break timing, require redrawing and cause audio sync problems.

Choosing the right frame rate

Ask yourself these questions before you open your software:

  1. Where will it be shown? Cinema, television, web, social media and games each have common standards.
  2. What style do you want? A cinematic look often points to 24 fps; a bouncy graphic look can embrace fewer drawings per second.
  3. What is your budget and time? More frames mean more production effort.
  4. What does the footage need to match? If your animation will be combined with live action, use the same frame rate as the footage.

Timing, spacing and the frame grid

Frame rate defines the grid on which you place your poses. At 24 fps, half a second equals 12 frames and one second equals 24. Knowing this helps you plan timing: a quick blink might take about 3 to 4 frames, a casual head turn perhaps 8 to 12. These numbers are starting points, not formulas. Use reference footage and test your timing by playing it back often.

Spacing, the distance between positions from frame to frame, interacts with frame rate. At a lower frame rate, big jumps between poses become more noticeable, so spacing must be planned more carefully to avoid stutter.

Common mistakes

  • Changing the frame rate in the middle of a project without retiming the animation.
  • Exporting at a different frame rate from the one used while animating, which alters speed or causes stutter.
  • Assuming a higher frame rate always looks better; sometimes it removes the charm of a stylized look.
  • Ignoring the playback device or platform, which may convert or drop frames.

A simple exercise to feel the difference

Animate a bouncing ball for one second. Do it first at 24 fps on ones, then on twos, and finally at 12 fps total. Play all three versions and compare. You will notice how the same movement changes character: smoother and floatier on ones, snappier on twos and more graphic at 12 fps. This small exercise teaches more than any theory.

Conclusion

Frame rate is one of the first decisions in any animation project and one of the most influential. Understanding how 12, 24 and 30 fps behave, and how ones and twos affect both style and workload, helps you make deliberate choices instead of accepting defaults. To keep developing your animation skills, take a look at the animation and design courses on Cursa and practice with guided projects.

How to Draw What You Actually See: Sighting, Proportion and Negative Space

Your drawings look off because your brain draws symbols, not shapes. Learn sighting, negative space and proportion checks to fix it.

Topology in 3D Modeling: Why Clean Quads Matter More Than You Think

Understand what topology means in 3D modeling, why artists prefer quads, and how edge flow decides whether a model deforms or breaks.

Wireframes, Mockups and Prototypes: What Each One Is Actually For

Three design artifacts, three different jobs. Learn what wireframes, mockups and prototypes answer, and when to use each.

Vector vs. Raster Graphics: What Every Beginner Designer Should Know

Understand the difference between vector and raster graphics, when to use each, and which file formats and tools belong to each category.

Typography Basics: A Beginner’s Guide to Choosing and Pairing Fonts

Learn the fundamentals of typography, from font categories to pairing rules, and make your designs clearer and more attractive.

Video Editing Workflow Essentials: From Ingest to Export (Plus a Simple Checklist)

Learn a practical video editing workflow from ingest to export, with organization tips, audio cleanup, color correction, and a simple QC checklist.

Storyboard to Screen: A Practical Workflow for Polished Video Animations

Learn a practical storyboard-to-screen workflow for video animations, from concept and animatics to lighting, rendering, and final polish.

Procedural Animation in Blender: Create Looping Motion with Modifiers, Drivers, and Noise

Learn how to create looping procedural animations in Blender using modifiers, drivers, and noise for faster, reusable motion graphics workflows.