Frame-by-frame vs keyframes: why a Tom & Jerry brief is not a Lottie

A lot of recent briefs arrive the same way: a character generated in AI, plus “animate this like a cartoon — Tom and Jerry energy.” That reference is clear for TV. It is a different craft from the motion that belongs on a landing page as Lottie or SVG. The split is frame-by-frame versus keyframes (usually on a rig).

Frame-by-frame: every drawing is a new picture

Classic cel animation (and most “cartoon squash” you remember from Saturday morning) is drawn pose by pose. The animator invents the in-betweens by hand — a smear, a stretch, a new silhouette. Playback is a stack of pictures: film, GIF, sprite sheet, or video. Volume and expression come from new art, not from sliding the same shapes around.

• Strengths: wild timing, rubber-hose physics, unique silhouettes every few frames — the Tom & Jerry punch.
• Costs: time and budget scale with seconds and complexity. Twelve unique drawings per second of motion is a production, not a website icon.
• On the web: it usually means MP4 / GIF / WebM — raster frames. File size and softness behave like raster, not like a tiny JSON loop.

Keyframes: pose A, pose B, the computer fills the gap

Web product motion is almost always keyframed. You set a few poses for layers (arm up / arm down, logo scale, UI panel open). The tool interpolates between them. In After Effects that becomes a Lottie JSON; in code or Illustrator-friendly setups it can be animated SVG / CSS. The character is a rig: separate parts that move, not a new full drawing every frame.

• Strengths: sharp at any size, small files when the art stays vector, easy loops for heroes, loaders, and UI.
• Limits: you get motion the rig can do — walk cycles, blinks, holds, simple acting. You do not get a hand-painted smear for free.
• AI stills: a Midjourney or Flux character is usually one flat picture. Before keyframes work, that art must be rebuilt (or redrawn) as separable vector layers — head, body, limbs, props — not left as a single PNG inside Lottie.

Why “animate my AI character like a cartoon” collides with the web

The ask mixes two products. Tom & Jerry timing wants frame-by-frame acting. A marketing site wants a crisp, light loop next to type and buttons. Baking cartoon acting into Lottie by stuffing PNG sequences into JSON turns the “lightweight” format into a video-shaped download — the worst of both worlds.

• True frame-by-frame for a 8–15 second gag → quote it as video / explainer (explainer videos), not as a hero Lottie.
• A looping mascot on the homepage → keyframed vector (or a short, simple cycle). Expect redesign into layers, not “press animate on the PNG.”
• If the AI render is painted and textured, treat it as raster reference art. Recreate the character flat for web motion, or keep the painterly look in MP4.

What I usually recommend

1. Pick the medium from the acting, not from the mood board. Cartoon chaos → video. Product / brand loop → Lottie or SVG.
2. Rebuild the character for the medium. Separate parts, clean fills, limited palette — then keyframe. The AI image stays the style reference.
3. Budget seconds, not vibes. Frame-by-frame is priced and scheduled like illustration + animation per second. Keyframed loops are priced like a web deliverable with a size target.
4. Ship the right file. Site UI and heroes: Lottie / SVG. Story with voice or wild acting: explainer / MP4.

A short brief that saves a round of email

Send the AI still, say whether the piece lives on the page (loop) or as a clip (story), and name one reference for *timing* and one for *look*. If timing is Tom & Jerry and the slot is a website hero, we will say so early and propose either a keyframed mascot that fits the stack or a short MP4 instead of forcing cartoon acting into JSON. For how those vector files stay fast once you choose keyframes, see optimize Lottie & SVG.