What Is FPS? Smooth Motion in Animation and Video

FPS (frames per second) is the number of frames (images) shown in one second of a video or animation. The short answer to "what is FPS?": it's the measure that determines how smooth motion looks. Cinema aims for 24 frames, while computer screens and interface animations mostly aim for 60. In this post, we explain what frame rate means for video and for the animations on your website, and where stutters come from.

What is FPS?

Video and animation are actually made of still images shown in rapid succession. Each image is called a frame. The more frames shown per second, the smoother the eye perceives the motion.

• Low FPS: Motion looks choppy, like a "slideshow."
• High FPS: Motion is smooth; the difference is especially noticeable in fast scrolling, games and sports footage.

But since each frame is a separate image, higher FPS means more data and more processing. In video, the file size grows; in web animations, the device has to prepare each frame in less time.

What do common frame rates mean?

Which value is "right" depends on the type of content. A corporate promotional film gives a cinematic feel at 24 or 25 FPS, while an app's screen recording or a product's rotation animation looks smoother at 60 FPS.

Are FPS and screen refresh rate the same thing?

No. The two are often confused:

• Frame rate (FPS): How many frames per second a system or video produces or contains.
• Refresh rate (Hz): How many times per second the screen updates the image.

Most screens refresh 60 times per second (60 Hz). As MDN notes, 75, 120 and 144 Hz screens have also become common. On a 60 Hz screen, the extra frames of a 120 FPS animation aren't visible. Conversely, even if the screen is 120 Hz, a 30 FPS video still moves with 30 FPS smoothness.

FPS in your website's animations

On websites, FPS is felt most in scrolling, menu openings, sliders, hover effects and page entrance animations.

The 16-millisecond budget

According to Google's web.dev guide, most device screens refresh 60 times per second. That means the browser has about 16.66 ms to prepare each frame. Since the browser has its own work to do as well, the guide says your code should finish its work in about 10 ms. When this budget is exceeded, the frame rate drops and page content judders and stutters on screen. This is called jank.

How does the browser prepare a frame?

web.dev describes preparing a frame as a five-stage pipeline: JavaScript → style calculation → layout → paint → composite. Which CSS property an animation changes determines which of these stages have to be repeated:

• Animations that change width, height, margins or position (top, left) can force layout to be recalculated on every frame. This is expensive.
• According to web.dev, there are two properties that can skip the layout and paint stages and be handled directly in the composite stage: transform and opacity. Doing slide, scale, rotate and fade effects with these two properties is the most reliable way to keep things smooth.

We explained the roles of CSS and JavaScript on a site in our posts What is CSS? and What is JavaScript?.

Animating with JavaScript

For animations done with JavaScript, using requestAnimationFrame syncs the work with the browser's screen refresh cycle. MDN notes that how often this method is called generally matches the screen's refresh rate, and that animation progress should be calculated from elapsed time; otherwise, the animation plays faster on high-refresh-rate screens.

Smoothness and user experience

A stuttering animation isn't just an aesthetic problem. Heavy scripts that keep the main thread busy can also delay the response to a visitor's taps and clicks. We covered INP, the metric that measures interaction speed, in our post What are Core Web Vitals?.

The reduced-motion preference

Some users ask, through their device settings, for unnecessary motion to be reduced. According to MDN, animations such as scaling or panning large objects can cause discomfort for people with vestibular (inner-ear balance) disorders. The prefers-reduced-motion media query in CSS detects this preference; simplifying or turning off animations for these users is good practice.

FPS when preparing video

• Keep the source frame rate. Converting a video shot at 25 FPS to 60 FPS doesn't add smoothness; frames are duplicated or artificially generated, and the file grows.
• Avoid unnecessarily high FPS. In background videos, a high frame rate often goes unnoticed but increases file size. Another factor that determines file size is the codec and bitrate; see What is a codec?
• Match the platform's expectations. Social media and video platforms support different frame rates; check the platform's current recommendations before uploading.
• Plan ahead for slow motion. Slow motion can only be achieved from footage shot at a high frame rate.

Common mistakes

• Converting everything to 60 FPS. A cinematic promotional film converted to 60 FPS can look like a "TV series," and the file gets bigger too.
• Animating by changing position and size. Animating properties such as left and width when transform and opacity are available can lead to stutter.
• Running many animations at the same time. The risk of dropped frames rises, especially on mid-range and budget phones.
• Testing only on a powerful computer. An animation that looks smooth on a desktop can stutter on a phone.
• Ignoring the reduced-motion preference.

Our experience

When we improved mobile PageSpeed on our own site, we also addressed off-screen animations; our goal was to keep motion in areas the visitor can't see from needlessly tying up the device. In web design projects, we prefer to use animation not as decoration but as a tool that guides the visitor, and we also test moving elements on mobile devices.

Frequently asked questions

Conclusion

FPS determines how smooth motion is, but the right frame rate depends on the content. In video, keeping the source frame rate and avoiding unnecessarily high values keeps files light. On your website, the key to smoothness is the browser being able to prepare each frame quickly: animations built with transform and opacity, tested on mobile and respectful of motion preferences.

To use motion well on your site or in your social media content, take a look at our web design and social media design services or get in touch.