Back to blog
Tutorials

Animated Tokens for Your VTT: WebM, Loops and What Each Tabletop Supports

How to make animated RPG tokens that actually work in Foundry, Roll20 and Owlbear Rodeo — the formats each one accepts, why perfect loops matter, and the restraint that keeps a map readable.

Animated Tokens for Your VTT: WebM, Loops and What Each Tabletop Supports

There's a specific moment worth engineering. The party has been fighting static circles for two hours. Then the door at the end of the hall opens, you drop one token on the map, and it's breathing — an aura pulsing slowly around it, embers drifting off the edges.

Nobody at the table says anything about the technology. They just sit up.

That's what an animated token is for. Not decoration — punctuation. Here's how to make one that works, and more importantly, how to keep from ruining the effect by using it everywhere.

Why static tokens are still the right default

Start with the argument against.

A virtual tabletop is a reading surface. Players scan it constantly to answer three questions: where am I, where are the enemies, what's changed since my last turn. Motion hijacks that scan. The human eye is built to look at whatever is moving, which means every animated token is competing for the same attention.

Twelve animated tokens on a map produce a screen that is genuinely harder to read than twelve static ones, and it also produces a browser tab that heats up someone's laptop. Both problems get worse as the party gets bigger.

So the rule is simple, and it's the most valuable thing in this article: animate the exception, not the rule. The boss. The summoned elemental. The thing that just walked through the wall. Everything else is a clean static token, and the contrast is exactly what makes the animated one land.

What "animated token" actually means

Two very different things get called the same name.

An animated source image — you took a video clip or an animated illustration and turned it into a token. The creature itself moves: wings beat, cloth shifts, a flame flickers. This needs source footage or animated art, which most GMs don't have for most creatures.

An animated treatment — you took a normal still image and added motion around it. An aura that pulses, particles that drift, a rotating ring, a glow that breathes. The art underneath is a still, and the animation is generated.

The second is the one almost every table can actually do, because the input is the same portrait you'd have used anyway. It's also, honestly, the one that reads better at token size: at 256 pixels, subtle wing movement is invisible, but a pulsing red aura says "this thing is dangerous" from across the map.

The token animator is built for the second case: you bring a still, it adds auras, particles and glows, and it exports something your tabletop can display.

Formats, and which VTT takes which

This is where most attempts fail, so it's worth being precise.

WebM is the standard for animated tokens. It's a video format with alpha channel support, which means the animation can have a transparent background — essential, because a token with a black box around it is worse than no animation at all. It's also efficient: a few hundred kilobytes for a smooth loop.

PNG frame sequences are a set of numbered still images, one per frame, exported as a ZIP. Some tools and tabletops want frames rather than video, and frames are also what you want if you're going to composite the animation yourself or feed it into another program.

GIF is the format people reach for first and the one you should avoid. It's limited to 256 colours, its transparency is binary — a pixel is either fully opaque or fully invisible, so you get hard jagged edges instead of a soft glow — and the files are larger than the WebM equivalent for worse quality.

Support by tabletop, as of 2026:

  • Foundry VTT has the best native support. Drop a WebM in as a token image and it plays, loops and respects transparency. This is the platform animated tokens were effectively designed for.
  • Owlbear Rodeo is a deliberately lightweight tabletop; animation support depends on the extension you're running rather than the core app, and it rewards small files above all.
  • Roll20 is the most constrained of the mainstream options, and animated token support has historically depended on your subscription tier. Check before you build a whole bestiary.
  • Mini Kraken takes the animator's WebM or frame-sequence export directly onto the tabletop, and the token sits with your sheets and handouts rather than in a separate asset library.

If you're not sure what your table supports, make one token, test it, then make the rest. Fifteen tokens in an unsupported format is a bad evening.

Making one that looks right

Start from a good static token. Animation does not rescue a bad crop. Get the framing right first — head and shoulders, centred, the mask that matches your grid — and then animate. The token cropper is the step before this one, and skipping it is the most common reason an animated token looks wrong.

Loop perfectly. This is the difference between professional and amateur. If the last frame doesn't flow into the first, you get a visible jump every few seconds, and once someone notices it they cannot stop noticing it. A perfect loop is invisible, and invisible is the goal.

Keep the motion slow. Auras should breathe, not strobe. A pulse of two to four seconds reads as "alive". A pulse of half a second reads as a notification badge and gets annoying by round two.

Respect the aspect ratio. A token squashed to fit a square is immediately obvious, and it's a common failure when tools resize without preserving proportions.

Watch the file size. Under 1MB per token, ideally well under. Every player's browser downloads every token; a 12MB dragon means twelve seconds of nothing happening for the person on hotel wifi.

Cap the resolution at 1080px. Beyond that you're paying bandwidth for detail that never reaches the screen — a token renders at a fraction of that size in practice.

Using colour as information

The most practical trick in the whole technique: make the aura mean something.

  • Red aura — hostile, or enraged.
  • Green — regenerating, or poisoned, pick one and hold it.
  • Blue or white — shielded, blessed, protected.
  • Pulsing faster — bloodied, below half HP.

Change the aura when the state changes and you've replaced a condition tracker with something players read without being told. That's a real mechanical benefit, not just decoration, and it's the strongest argument for animated tokens beyond spectacle.

A realistic workflow

For a session where one creature deserves the treatment:

  1. Pick one creature. The boss, or the reveal.
  2. Crop it as a normal static token first — right mask, right framing, transparent background.
  3. Add the aura and particles in the animator, matched to what the creature is: fire for the elemental, sickly green for the plague-thing, cold white for the revenant.
  4. Set the loop and check it plays seamlessly.
  5. Export as WebM if your tabletop takes it, PNG frames if it doesn't.
  6. Test it on the map before the session. Not during.

Total time: under ten minutes. Effect: the one moment of the night everyone remembers.

Everything else on the map stays static, and that's not a compromise — it's what makes the animated one work.

The token animator and the token cropper are both free and browser-based, alongside the rest of the RPG tools. If you want the wider comparison of what's out there, we covered it in the best free token makers.