How many frames does a scroll animation need? (and how big should each be)

Short answer: for a typical hero scroll animation, 60–350 frames is enough. Aim for about 10–20px of scroll per frame, export each frame at the size it's displayed, and target roughly 15–40KB per WebP frame. On mobile, use a thinner set: smaller dimensions and often 40–100 frames. More frames only help if the scroll distance is long enough to show them.

How do I work out the right frame count?

Start from scroll distance, not video length:

frames ≈ scroll distance (px) ÷ 10–20

• Animation spans 1,500px of scroll → about 75–100 frames.
• Spans 3,000px → about 150–200 frames.
• Spans 800px → about 40–55 frames.

If your video has more frames than that, drop every second or third frame.

When do more frames help?

• Long, slow scroll sections where each frame is on screen for a while.
• Fast motion in the source (a quick spin) where gaps would look jumpy.
• Large, high-contrast subjects where frame-to-frame jumps are easy to see.

When do more frames hurt?

• On mobile, where every extra frame adds loading time if you are on a slow connection (see below).
• Short scroll sections, where several frames get skipped per scroll step anyway.
• Above the fold, where loading hundreds of images delays everything else.

How big should each frame be?

Two numbers matter:

1. File size (download): WebP at moderate quality, around 15–90KB per frame for a hero. Larger for full-screen detailed shots, smaller for simple renders.
2. Decoded size (memory): width × height × 4 bytes, regardless of format. A 1920×1080 frame is about 8 MB in memory; 1280×720 is about 3.7 MB; 750×1334 is about 4 MB.

Export at the width it's actually displayed. A full-width desktop hero rarely needs more than 1920px; a phone set rarely needs more than ~800–1000px on the long side.

What about mobile?

Use a separate mobile frame set: portrait crop, smaller dimensions, and fewer frames if the scroll section is shorter on phones. That's the single biggest fix for phone lag and iOS crashes. Full list in image sequence lagging on mobile? 9 fixes.

Quick reference

These are starting points, not laws. Test on a real phone and adjust.

Converting a video to frames at these settings is what the free npx scrollsequence vid2ssq converter is for; Scrollsequence v2 also has it built into wp-admin, with multi-resolution sequences for the mobile set.

Related reading

• Image sequence lagging on mobile? 9 fixes
• WebP vs PNG vs JPG for image sequences
• iPhone Safari crashes or reloads on my scroll animation

FAQ

Should I match the video's frame rate? No. Scroll animations aren't tied to time. Match frames to scroll distance instead.

Does a higher frame count make it smoother? Only up to about one frame per 10–20px of scroll. Beyond that, frames get skipped and you just pay for them in memory and bandwidth.

What resolution should mobile frames be? Around 800–1000px wide is a good start, cropped to fit on phone screen.