Exercise Animations in Videos: WebP to MP4

Use RepDB exercise animations beside a presenter, over your footage or inside a branded workout lesson. Standard gives you a consistent character across the motion library, plus matching stills for thumbnails and supporting material. You can show exercise variations without filming each demonstration yourself.

The clips ship as 960px animated WebP with a real alpha channel: no background, just the figure. Keep that master so you can change the background or aspect ratio when you export. Check animation and transparency support in your editor before importing a whole project: support for a WebP image does not necessarily mean support for animated WebP playback.

Editing in CapCut? Start with the exercise animations for CapCut guide. It includes three downloadable green-screen MP4 samples and steps for placing an exercise over your footage with Chroma key. CapCut lists WebP as a supported image format, but that list does not establish animated WebP support across editor versions.

Which export you need depends on the job:

Example 1: a clip on a background

Example 2: figures standing in your own shot

Both were built with the commands below.

Step 1 — get the frames out

Direct FFmpeg decoding returned image data not found on the clips tested for this guide. Support depends on the decoder build and input; extracting full-canvas frames first avoids that particular decoding failure.

Use libwebp’s anim_dump, which composites every frame onto the full canvas:

CLIP=images/animations/mountain-climbers.webp
mkdir -p frames && anim_dump -folder frames "$CLIP"

It ships with cwebp — brew install webp, apt install webp, or the libwebp release binaries.

The fixed-rate commands below use an estimated average frame rate. This is suitable for a quick preview, but variable-duration frames need their original timestamps for accurate timing. WebP records per-frame durations; use those with a converter that preserves them, such as an FFmpeg concat list.

FPS=$(webpinfo -summary "$CLIP" \
  | awk '/Duration/ {n++; ms += $2} END {printf "%.0f", n / (ms / 1000)}')

Read timing from the particular file you are exporting rather than assuming one rate for the entire library.

Step 2 — pick your export

MP4 on a solid background, for a post that goes straight out:

ffmpeg -y -framerate "$FPS" -i "frames/dump_%04d.png" \
  -f lavfi -i "color=c=#111827:s=960x960:r=$FPS" \
  -filter_complex "[1:v][0:v]overlay=shortest=1,format=yuv420p[v]" \
  -map "[v]" -an -c:v libx264 -crf 23 -movflags +faststart out.mp4

Both rates carry $FPS — the colour source drives the output through the overlay. Swap color= for -loop 1 -i background.jpg to use an image.

Over your own footage, corner placement:

ffmpeg -y -i your-clip.mp4 -framerate "$FPS" -i "frames/dump_%04d.png" \
  -filter_complex "[1:v]scale=540:-1[fg];[0:v][fg]overlay=W-w-40:H-h-40:shortest=1[v]" \
  -map "[v]" -map 0:a? -c:v libx264 -crf 20 -movflags +faststart out.mp4

Keeping the alpha for your timeline — ProRes 4444 for wide editor support, WebM/VP9 for a fraction of the size:

ffmpeg -y -framerate "$FPS" -i "frames/dump_%04d.png" \
  -c:v prores_ks -profile:v 4444 -pix_fmt yuva444p10le out.mov

ffmpeg -y -framerate "$FPS" -i "frames/dump_%04d.png" \
  -c:v libvpx-vp9 -pix_fmt yuva420p -b:v 0 -crf 30 out.webm

The PNG sequence is the third and most portable option — most editors import dump_0001.png as a sequence. Support varies by application and version, so run one file from the free preview bundle through yours before planning a series around it.

GIF, only where a GIF is genuinely required. Generate a palette from the clip or the colours band:

ffmpeg -y -framerate "$FPS" -i "frames/dump_%04d.png" \
  -filter_complex "[0:v]split[a][b];[a]palettegen[p];[b][p]paletteuse" out.gif

GIF transparency is one bit — fully opaque or fully clear — so soft edges fringe against any background other than the one you generated the palette on.

Two things that make an export look wrong

Frame rate — read it from the file, never assume.

Edges — check the result on a light and a dark background. A pale halo around a barbell, a band or a cable means something in the chain flattened against the wrong background.

Before you publish

Purchases carry the Media Use Addendum: video, social posts, courses, presentations and thumbnails under your own brand, free or monetised. The clips go into your work rather than being the work — full-frame moments up to a third of the running time, otherwise inside 70% of the frame with your own footage, graphics, text or narration alongside. Work for someone else’s brand needs a separate agreement.

Media Use Addendum (m1.0) has the exact wording, exercise clips for video has the library itself, and Animated WebP vs MP4 covers the app-side view — byte budgets, decode cost, what to ship on which screen.