How to Animate a Logo [2026]: 12 Steps in 30 Min

A good logo animation needs three things: a clean logo file, about 18 frames of motion at the start, and a hold long enough for viewers to read the mark. This tutorial walks through 12 steps that take roughly 30 minutes and end with a five-second, 1920×1080, 30 fps logo sting you can export as MP4, WebM or ProRes with alpha.

Adobe’s Creative Cloud post describes expanded SVG and Illustrator workflows in After Effects, and version 26.3 added editable shape-layer pasting for Illustrator/SVG content, which means a vector logo now reaches the timeline with less cleanup than it used to need. The main route below uses After Effects. A second route repeats the exact same timing in a free ffmpeg script, so you can follow along without a subscription. Both routes feed the wider set of logo animation guides on this site.

Everything here is built around one rule: the timing is the design. Once you know which frame the logo starts to move, which frame it lands, and how long it sits still, the choice of software matters far less than most tutorials suggest.

What You Are Building: A 5-Second Logo Sting

A logo sting is a short clip where your mark appears, holds, and leaves. It can open a video, close one, or sit as a transparent overlay on a stream. For this tutorial the target is a 150-frame clip at 30 fps, which equals exactly five seconds. Shorter clips (three seconds) work for fast-paced channels, and anything past six seconds starts to test the viewer’s patience.

Think of the clip as three blocks: in, hold, out. The in block is where the motion happens. The hold is where the logo stays readable and the sound resolves. The out block clears the screen so the next shot can start. Beginners often put most of their effort into the in block and then rush the other two, which is why their stings feel like they end by accident.

Here is the frame map the rest of the tutorial uses. At 30 fps, one second is 30 frames, so 18 frames is 0.6 seconds.

• Frame 0 to 6: empty background. The sound starts here, which gives the eye a half-beat to settle.
• Frame 6 to 18: the logo fades in over 12 frames (0.4 seconds).
• Frame 0 to 18: the logo scales up to its full size with an ease-out curve, so most of the growth happens early and the last frames slow down.
• Frame 18 to 132: hold, with the logo fully visible.
• Frame 132 to 147: fade out over 15 frames (0.5 seconds).
• From frame 147: empty background, then the clip ends.

You will build this twice. First in After Effects with keyframes, an easing curve and a small overshoot expression. Then in a shell script with ffmpeg, where the same curve is written as a formula. The script version is a complete working project, so you can batch it later for vertical and square formats.

The hold is deliberately long. A reader needs about a second to recognize a mark they have never seen, and a second more to read any text inside it. The hold covers that comfortably, even if you later trim a few frames to fit a tighter intro slot.

Prerequisites and Versions

You need a logo file, one animation tool, and a way to check your export. The list below separates what the After Effects route needs from what the ffmpeg route needs. You can do both, and the combination is the best way to see why the timing numbers work.

• Adobe After Effects, any 26.x release. Adobe’s release notes list 26.5 as the newest released version. Adobe’s notices from October 27, 2026 also say After Effects and related apps are preparing for version 27.0, which is a preparation notice and not a release. Every step here uses basic keyframes, so older 2025 builds work too. The percentage-based guides in step 4 need 26.5.
• A current ffmpeg build on your PATH, with libx264, libvpx-vp9 and prores_ks enabled. Most static builds include all three. Run ffmpeg -version to confirm.
• A recent version of Python for the QA script, and a recent version of Pillow if you want the script that draws a placeholder logo.
• A logo file. Best is an SVG or an Illustrator file. Second best is a PNG with a transparent background, at least 2000 pixels wide, so it stays sharp when you scale it to 100 percent on a 1080p frame.
• A short sound. Any royalty-free hit or sweep under one second. You can also generate a plain tone with ffmpeg, as the project does.
• A player you trust. Open the final file in at least two apps (for example your editor and a browser) before you decide it is correct.

After Effects runs through an Adobe Creative Cloud subscription, so check Adobe’s pricing page for the current cost in your region. ffmpeg, Python and Pillow are free.

One more preparation step saves a lot of grief later: make a project folder with three subfolders called source, work and export. Keep the original logo file untouched in source. Every export goes to export with the format and size in the filename, such as logo_sting_1920x1080_30.mp4. When a client asks for the vertical version six months from now, you will know exactly which file is which.

Finally, decide the frame rate before you open any software. If the video this sting will join runs at 30 fps, make the sting 30 fps. If the video runs at 24 fps, make it 24. The ffmpeg script takes the rate as an argument, so switching is trivial. Mixing rates is the most common source of the stutter people blame on their computers.

Choose Your Route: Five Ways to Animate a Logo

There are five realistic ways to animate a logo in late 2026. They differ in how much control you get, what they cost, and how repeatable the result is. The table shows what each vendor’s own pages confirm as of October 30, 2026.

If you want precise control, use After Effects. If you want something you can rerun with one command and no license, use the ffmpeg script. If you only need a quick clip for a social post, Adobe Express or Canva will get you there in ten minutes, but you give up frame-level control.

AI generators sit in a different category. They are good at producing a moving background or a particle burst, and they are unreliable at keeping a specific mark intact. The safe pattern is to generate the motion plate with AI and composite your real logo file on top. That pattern is covered in a later section. For readers who want a ready-made starting point instead, the Vipid intro themes list their resolution, length and frame rate on each page, which makes them a useful spec reference when you set your own composition.

A word on Canva Brush. According to Canva’s announcement, it is a vision-language model for editing existing designs, powering supported edits for Canva Pro subscribers with wider availability planned. That is a design-editing model, and the announcement does not describe it as a motion tool. Do not expect it to build the sting for you. Treat it as help for tidying the static logo before you animate it.

Prepare the Logo File Before You Touch a Timeline

Most bad logo animations are bad logo files. A soft shadow baked into the PNG, a stray white box around the mark, or a 400-pixel-wide image stretched to fill a 1080p frame will look wrong no matter how good the easing is. Spend five of your thirty minutes here.

Start with the format. If you have the vector original, use it. SVG and Illustrator files stay sharp at any size, and After Effects can convert them into editable shape layers, which lets you animate parts of the logo separately later. If you only have a raster file, use PNG with transparency and make sure it is at least twice the pixel size you plan to display it at, so scaling never softens the edges.

Next, check size and position. A logo that fills about 30 percent of the frame height reads well on a 16:9 intro. Keep at least 10 percent clear space from every edge. On a 1920×1080 frame that is 192 pixels left and right, and 108 pixels top and bottom. Those margins matter more for the vertical version, because phone interfaces cover the top and bottom of a 1080×1920 frame.

Then remove anything that is not the mark. Drop shadows and glows should come out of the file. You will add light back in the timeline where you can control it. Make sure the logo uses sRGB colors, and keep a flat version in your brand color for the case where the sting plays over a busy background.

If you do not have a logo yet and want to run the project as a dry run, this short Pillow script draws a 1000×1000 placeholder with a transparent background. It produces a coral circle with a white triangle, which is plenty to judge motion.

# make_logo.py
from PIL import Image, ImageDraw

im = Image.new("RGBA", (1000, 1000), (0, 0, 0, 0))
d = ImageDraw.Draw(im)
d.ellipse((100, 100, 900, 900), fill=(255, 99, 71, 255))
d.polygon([(400, 300), (400, 700), (720, 500)], fill=(255, 255, 255, 255))
im.save("logo.png")
print(im.size)

Run it with python3 make_logo.py and it prints (1000, 1000). The circle itself is 800 pixels wide, which becomes useful in the output checks later: when the project scales the file to 600 pixels, the visible circle measures 480 pixels.

Frame by Frame: Steps 1 to 4, Set Up the Project

These four steps build the container: composition, logo layer, anchor point and guides. They take about eight minutes. Do not skip step 4, because guides are what keep the finished sting consistent across projects.

Step 1. Create the composition. Choose Composition, then New Composition. Set the width to 1920 and height to 1080. Set the frame rate to 30 (not 29.97 unless your video uses it). Set the duration to 0:00:05:00, which is 150 frames. Set the background color to a dark navy such as #0B0F1A. Open the timeline’s time display and switch it to frames so you can see frame numbers rather than timecode. You will be typing frame numbers for the next hour.

Many presets default to 29.97 fps, and that default is a trap. If your sting is 29.97 and the video it joins is 30, an editor may drop or repeat a frame every 33 seconds. You will not see it in a five-second clip, but you will see it when a render is conformed. Pick the right rate now.

Step 2. Import and place the logo. Choose File, then Import, and bring in your SVG, AI or PNG. Drag it into the composition. For a vector file, right-click the layer and choose Create, then Create Shapes from Vector Layer. After Effects builds a shape layer you can edit, and you can delete the original footage layer. For a PNG, turn on the Continuously Rasterize switch only if it is a vector source. A PNG cannot gain sharpness from that switch, so scale it conservatively.

Step 3. Center the anchor point. Scale animates around the anchor point, so a logo whose anchor sits in a corner will grow out of that corner. Select the layer and choose Layer, then Transform, then Center Anchor Point in Layer Content. For a shape layer, check that the anchor sits in the visual center of the mark and not the center of its bounding box if the logo is asymmetric. Use the Pan Behind tool (press Y) to nudge it by eye. Then open the Align panel and center the layer in the composition both horizontally and vertically.

Step 4. Set guides at 10 percent. Adobe’s community announcement for After Effects 26.5 says the release adds percentage-based and edge-pinned guides, custom guide colors, disk caching for propagated Object Matte results, effect color labels and a modernized Effect Controls panel. The guide change is the useful one here. Drop guides at 10 percent from each edge so a left guide sits at 192 pixels and a top guide at 108 pixels. On earlier builds, show the rulers with Ctrl+R (Cmd+R on a Mac) and drag guides from them to those pixel positions. Resize the logo until it clears the guides with room to spare.

At the end of step 4 you should see a dark frame with a centered logo, four faint guides, and a timeline that reads 150 frames. Save the project as logo_sting_v01.aep. Save a new version number after every major step, because After Effects can be unforgiving about crashes. Adobe’s help pages describe improved Auto-Save and crash recovery in October 2026, including a prompt to reopen the latest Auto-Save, but a versioned file is still a better safety net.

Frame by Frame: Steps 5 to 8, Keyframe the Motion

This is the part people think of as animating. It takes about twelve minutes, and the order matters: scale first, opacity second, overshoot third, exit last. Work with the property shortcuts. Press S for Scale, T for Opacity, U to reveal every animated property, and F9 to apply Easy Ease to selected keyframes.

Step 5. Keyframe the scale. Move the playhead to frame 0, press S, and click the stopwatch. Set the value a little below 100 percent. Move to frame 18 and set it to 100 percent. After Effects writes a second keyframe automatically. Select both keyframes and press F9. The default Easy Ease curve is symmetric, which feels floaty. Open the Graph Editor (the graph icon on the timeline, or Shift+F3) and switch to the speed graph. Drag the incoming handle on the second keyframe until the curve flattens strongly at the end. Leave the first keyframe’s outgoing influence low. The result is a logo that leaves quickly and arrives gently, which is what the ffmpeg formula later reproduces with a cubic curve.

Step 6. Keyframe the opacity. Press T. At frame 6 set opacity to 0 percent and click the stopwatch. At frame 18 set it to 100 percent. Press F9 on both. Starting the fade at frame 6 instead of frame 0 gives the viewer half a beat of empty frame, and ending it at frame 18 means the logo is fully opaque exactly when the scale settles.

Step 7. Add the overshoot. A small overshoot makes the logo feel like it has weight. Alt-click (Option-click on a Mac) the Scale stopwatch to open the expression field and paste the expression below. It adds a damped sine wave after the last keyframe, using the velocity at that keyframe.

// Scale > Alt-click stopwatch > paste
amp = 0.06;     // size of the bounce, higher = bigger
freq = 3.0;     // bounces per second
decay = 7.0;    // higher = settles faster

n = 0;
if (numKeys > 0) {
  n = nearestKey(time).index;
  if (key(n).time > time) n--;
}

if (n > 0) {
  t = time - key(n).time;
  v = velocityAtTime(key(n).time - 0.001);
  value + v * amp * Math.sin(freq * t * 2 * Math.PI) / Math.exp(decay * t);
} else {
  value;
}

With these values the logo grows slightly past 100 percent and settles in about a third of a second. If the bounce looks cartoonish, cut amp to 0.03. If it looks stiff, raise decay only after you have tried lowering freq to 2. Remember that the ffmpeg route in the next section skips this overshoot, so the two versions will differ by a few frames of settle.

Step 8. Keyframe the exit. Move to frame 132 and press T. Click to add a keyframe at 100 percent. At frame 147 set the value to 0 percent. Press F9 on both. Keep the exit shorter than the entrance, since the viewer is already looking away. Press U to display all animated properties, and confirm that each property has exactly the keyframes you listed.

Play the preview with RAM Preview (press 0 on the numeric keypad). If the motion looks even, with no obvious pause at frame 18, the curve is wrong. If the logo seems to hesitate before it starts, the first keyframe’s influence is too high. Fix these now, because every later step assumes the motion is right.

Frame by Frame: Steps 9 to 12, Sound, Export and Check

The last four steps turn a good preview into a deliverable file. They take about ten minutes. Sound goes in first, because it changes how you judge the motion.

Step 9. Turn on motion blur. Click the Motion Blur switch (the three overlapping circles) on the logo layer, then the master Motion Blur button at the top of the timeline. In Composition Settings, open the Advanced tab and set Shutter Angle to 180 degrees, which approximates a standard film shutter. Blur on a logo that scales only 20 percent is subtle, but it takes the digital edge off the first six frames.

Step 10. Add the sound. Import a short hit, place the audio layer so its first strong peak lands on frame 6 (where the logo starts to appear) or frame 18 (where it lands). Frame 6 feels like an arrival cue, and frame 18 feels like a punctuation mark. Pick one and commit. Set the level low, around -16 dB, because a sting that plays before speech should never compete with the voice. Keep the sample rate at 48 kHz so it matches video audio.

Step 11. Export. Press Ctrl+M (Cmd+M on a Mac) to add the composition to the Render Queue, or Ctrl+Alt+M to send it to Adobe Media Encoder. Choose H.264 for the YouTube and social file. Use the Match Source settings, a variable bitrate, and leave the audio at AAC 48 kHz. Make a second render for overlays: in the Render Queue, click the Output Module, choose QuickTime as the format, pick ProRes 4444 as the codec, and set Channels to RGB + Alpha. That file keeps transparency, and you can drop it on top of any footage.

Step 12. Check the file. Open the MP4 in a player and drag through frames 0, 6, 18, 60 and 132, then to the last frame. Frame 0 should be empty. Frame 18 should show the logo at full size. The last frame should be empty again. Listen with headphones for any click at the start or end of the audio. Then run the QA script in the next section, which verifies size, frame rate, length, codec and audio presence in one command.

That is the whole After Effects route, and if you kept moving it should have taken around 30 minutes. If it took longer, the likely culprits are logo cleanup and tuning the graph editor, which are the two steps where hesitation costs the most time. A simple rule helps: set the keyframes in the first pass, tune only one curve per pass, and stop when the motion feels right at full speed.

One note on Adobe’s AI features. Adobe’s help pages list an After Effects AI Assistant in beta, with documentation for custom skills added in October 2026. A beta tool can change before release, so keep your core workflow on keyframes you control. If you try the assistant, treat its output as a first draft and rebuild it against the frame map above.

Complete Working Project: A Free ffmpeg Logo Sting

This project builds the same sting without a timeline. The script takes a logo, an output name, a frame size, a logo size in pixels, an optional length in seconds and an optional frame rate. It draws a navy background, fades the logo in at frame 6, scales it from 80 to 100 percent over 0.6 seconds with a cubic ease-out, holds, fades out over the last 0.5 seconds, and mixes in a short tone at 0.2 seconds. Save it as make_sting.sh and run chmod +x make_sting.sh.

#!/usr/bin/env bash
# Usage: ./make_sting.sh logo.png out_name WIDTH HEIGHT LOGO_PX [SECONDS] [FPS]
set -euo pipefail

LOGO="$1"; OUT="$2"; W="$3"; H="$4"; PX="$5"
DUR="${6:-5}"; FPS="${7:-30}"
BG="0x0B0F1A"
OUT_START=$(awk -v d="$DUR" 'BEGIN{printf "%.2f", d-0.6}')

ffmpeg -hide_banner -loglevel error -y \
  -f lavfi -i "color=c=${BG}:s=${W}x${H}:r=${FPS}:d=${DUR}" \
  -loop 1 -framerate "$FPS" -t "$DUR" -i "$LOGO" \
  -f lavfi -i "sine=frequency=880:duration=0.5,afade=t=in:d=0.02,afade=t=out:st=0.2:d=0.3,volume=-16dB,adelay=200|200,apad" \
  -filter_complex "
    [1:v]format=rgba,
         fade=t=in:st=0.2:d=0.4:alpha=1,
         fade=t=out:st=${OUT_START}:d=0.5:alpha=1,
         scale=w='round(${PX}*(0.8+0.2*(1-pow(1-min(t/0.6,1),3)))/2)*2':h=-2:eval=frame[lg];
    [0:v][lg]overlay=x='(W-w)/2':y='(H-h)/2':format=auto,format=yuv420p[v]" \
  -map "[v]" -map 2:a \
  -c:v libx264 -preset slow -crf 16 -r "$FPS" \
  -colorspace bt709 -color_primaries bt709 -color_trc bt709 \
  -c:a aac -b:a 192k -ar 48000 -ac 2 \
  -t "$DUR" -movflags +faststart "${OUT}.mp4"

echo "wrote ${OUT}.mp4"

The key line is the scale filter. Its width expression reads the frame timestamp t (available because of eval=frame), computes progress min(t/0.6,1), and applies a cubic ease-out with 1-pow(1-progress,3). That ease maps 0 to 1 over 0.6 seconds, so the size grows toward the target width and settles there. The round(.../2)*2 wrapper forces an even pixel width, and h=-2 keeps the height even too. Odd sizes cause shimmer in some players, as the troubleshooting section explains.

Run it three times to produce the three common aspect ratios. The logo size changes with each frame so the mark keeps similar visual weight.

./make_sting.sh logo.png sting_16x9 1920 1080 600
./make_sting.sh logo.png sting_9x16 1080 1920 700
./make_sting.sh logo.png sting_1x1  1080 1080 600 4 24

Each run prints one line, such as wrote sting_16x9.mp4, and writes nothing else because of -loglevel error. The third command makes a four-second, 24 fps square version, which shows how the optional arguments work. Now save the QA script. It reads each file’s properties from ffmpeg, compares them with the expected spec, and exits with a failure code if anything is off. That makes it safe to call from a batch or a CI job.

# qa_check.py
import re
import subprocess
import sys

SPECS = {
    "16x9": (1920, 1080, 30),
    "9x16": (1080, 1920, 30),
    "1x1": (1080, 1080, 24),
}

def probe(path):
    err = subprocess.run(["ffmpeg", "-hide_banner", "-i", path],
                         capture_output=True, text=True).stderr
    dur = re.search(r"Duration: (\d+):(\d+):([\d.]+)", err)
    vid = re.search(r"Video: (\w+).*?(\d{3,4})x(\d{3,4}).*?(\d+(?:\.\d+)?) fps", err)
    has_audio = "Audio:" in err
    secs = int(dur[1]) * 3600 + int(dur[2]) * 60 + float(dur[3])
    return secs, vid[1], int(vid[2]), int(vid[3]), float(vid[4]), has_audio

def main(files):
    failed = False
    for path in files:
        key = next((k for k in SPECS if k in path), None)
        secs, codec, w, h, fps, audio = probe(path)
        want_w, want_h, want_fps = SPECS[key]
        problems = []
        if (w, h) != (want_w, want_h): problems.append(f"size {w}x{h}")
        if round(fps) != want_fps: problems.append(f"fps {fps}")
        if not 3 <= secs <= 6: problems.append(f"length {secs:.2f}s")
        if codec != "h264": problems.append(f"codec {codec}")
        if not audio: problems.append("no audio track")
        status = "FAIL " + ", ".join(problems) if problems else "ok"
        failed |= bool(problems)
        print(f"{path}: {w}x{h} {fps:g}fps {secs:.2f}s {codec} -> {status}")
    sys.exit(1 if failed else 0)

if __name__ == "__main__":
    main(sys.argv[1:])

Run python3 qa_check.py sting_16x9.mp4 sting_9x16.mp4 sting_1x1.mp4. The script picks the expected spec from the aspect-ratio tag in each filename, which is why the naming convention matters. A clean run prints this:

sting_16x9.mp4: 1920x1080 30fps 5.00s h264 -> ok
sting_9x16.mp4: 1080x1920 30fps 5.00s h264 -> ok
sting_1x1.mp4: 1080x1080 24fps 4.00s h264 -> ok

To confirm the motion itself, pull single frames and measure the logo. Frame 12 of the 16:9 file should show the logo slightly smaller than full size, and frame 18 onward should show it at full size. The last frame shows nothing but background. If frame 18 is still growing, the ease is not finishing on time. If the last frame still shows the logo, the fade-out start is wrong, so check the OUT_START line.

Alpha exports for overlays

An MP4 cannot carry transparency, since H.264 in yuv420p has no alpha channel. For stream overlays and editors that composite over footage, export a version with alpha. Both commands below reuse the same filter graph and start from a transparent canvas instead of a solid color. Replace the logo name and size to suit your file.

# WebM (VP9 with alpha), small and web friendly
ffmpeg -y -f lavfi -i "[email protected]:s=1920x1080:r=30:d=5,format=yuva420p" \
  -loop 1 -framerate 30 -t 5 -i logo.png \
  -filter_complex "[1:v]format=rgba,fade=t=in:st=0.2:d=0.4:alpha=1,fade=t=out:st=4.4:d=0.5:alpha=1,scale=w='round(600*(0.8+0.2*(1-pow(1-min(t/0.6,1),3)))/2)*2':h=-2:eval=frame[lg];[0:v][lg]overlay=x='(W-w)/2':y='(H-h)/2':format=auto,format=yuva420p[v]" \
  -map "[v]" -c:v libvpx-vp9 -pix_fmt yuva420p -b:v 0 -crf 28 -auto-alt-ref 0 sting_alpha.webm

# ProRes 4444 with alpha, large and editor friendly
ffmpeg -y -f lavfi -i "[email protected]:s=1920x1080:r=30:d=5,format=yuva444p10le" \
  -loop 1 -framerate 30 -t 5 -i logo.png \
  -filter_complex "[1:v]format=rgba,fade=t=in:st=0.2:d=0.4:alpha=1,fade=t=out:st=4.4:d=0.5:alpha=1,scale=w='round(600*(0.8+0.2*(1-pow(1-min(t/0.6,1),3)))/2)*2':h=-2:eval=frame[lg];[0:v][lg]overlay=x='(W-w)/2':y='(H-h)/2':format=auto,format=yuva444p10le[v]" \
  -map "[v]" -c:v prores_ks -profile:v 4444 -pix_fmt yuva444p10le sting_alpha.mov

The WebM file is a fraction of the size of the ProRes file, which runs to tens of megabytes for five seconds at 1080p. Use WebM for browser sources and web pages, and ProRes for hand-offs to an editor. Support for alpha in WebM varies between players and editing apps, so test the file in the tool that will actually play it before you ship it.

GIF and PNG sequence

A GIF is useful for email signatures and chat. A PNG sequence is useful when an animator wants to import individual frames. Both come from the MP4 or the alpha file.

# 480 px GIF at 15 fps with a generated palette
ffmpeg -y -i sting_1x1.mp4 \
  -vf "fps=15,scale=480:-1:flags=lanczos,split[a][b];[a]palettegen=max_colors=128[p];[b][p]paletteuse=dither=bayer:bayer_scale=4" \
  sting.gif

# PNG sequence with alpha from the ProRes file
mkdir -p seq
ffmpeg -y -i sting_alpha.mov seq/logo_%04d.png

The palette step is what keeps the GIF from banding. Without it, ffmpeg falls back to a default palette and the logo’s gradient edges turn into stripes. Lowering max_colors to 64 or fps to 12 shrinks the file further.

Render Settings by Destination

Pick the render settings by where the file will play, not by habit. The table lists the settings this project uses. Resolutions and lengths are working recommendations for a logo sting, and each platform can change its own limits, so confirm against the platform’s help page before a client delivery.

The frame rate rule from earlier applies again: match the video the sting will join. If your main videos run at 24 fps, render at 24 and do not convert later. For a quick spec reference, the intro theme pages list resolution, length and frame rate for each theme, which is a handy cross-check when you are unsure how long a sting should be.

Bitrate deserves a short note. The script uses constant-quality encoding at CRF 16, which lets the encoder spend bits where the frame needs them. A flat navy background with a simple logo compresses to a very small file. If you need a bitrate cap for a platform upload, add -maxrate and -bufsize to the video options and keep CRF as the quality target.

Always check the first and last frames of the export. A 150-frame clip at 30 fps has frames numbered 0 through 149. If your player or editor reports 151 frames, an extra frame has crept in from a rounding error in the length. In ffmpeg the -t option on the output trims to the exact duration, which is why the script sets it explicitly.

From the Vipid archive

The animated logo intro theme in the Vipid library is a finished example of a short logo reveal, useful for comparing your own hold and exit timing.

AI Routes: Animating a Logo With Prompts

Generative video tools can create dramatic motion in seconds, but they treat a logo as an image to reinterpret rather than a mark to preserve. Letters morph, thin strokes vanish, and colors drift. That is why the dependable pattern is to use AI for the plate (the moving background, a light burst, a particle trail) and keep the real logo file as a separate layer on top.

Runway now positions itself as a multi-model platform, with its own models alongside third-party ones. Runway’s developer documentation, including a page on generating campaign-ready assets through a single API call, describes turning multi-step workflows into endpoints. For logo work, the practical question is cost. The table converts the per-second prices Runway Dev lists as of October 30, 2026 into the price of a five-second plate, using the rule that one credit equals $0.01.

The five-second column is simple multiplication of the listed rate, so treat it as the cost of one attempt. Expect to generate several plates before one fits your brand, which multiplies the cost accordingly. Reference images cost an additional credit each according to Runway’s documentation.

For the app plans, Runway’s pricing page lists these tiers: Free at $0 with 125 one-time credits, Standard at $15 a month ($12 a month billed annually) with 625 credits a month, Pro at $35 ($28 annually) with 2,250 credits, and Max at $95 ($76 annually) with 9,500 credits. Runway has also reportedly stopped offering its Unlimited plan, so check the pricing page before you plan around it.

Here is the compositing pattern that works. Generate a 1080p plate with a plain, dark background and a gentle light movement, with no text and no logo in the prompt. Import the plate into After Effects or your editor on the bottom layer. Place your real logo layer above it using the same keyframes from steps 5 to 8. Blend the logo with a soft shadow or a subtle glow that borrows color from the plate. The plate supplies the atmosphere, and the logo stays perfectly accurate.

Adobe Express offers a lighter path. Adobe’s release notes say the September 2026 web release added video import with transparent backgrounds, which lets you layer a transparent logo clip (like the WebM or ProRes alpha file from this project) over other footage without a green screen. Adobe also opened its AI Assistant Beta to Free plans without a waitlist in August 2026. Adobe’s results do not confirm a dedicated logo-animation mode, so use Express for assembly rather than for the animation itself.

Canva follows the template route. Its newsroom shows the company still shipping free template collections, such as the Mattel template set, but none of that targets logo motion. If you animate in Canva, expect preset motion styles rather than control over frame timing.

Common Pitfalls That Ruin a Logo Animation

These seven mistakes account for most of the weak stings in the wild. Each one is cheap to avoid if you know about it before you start.

1. Too much motion. A logo that spins, bounces, slides and glows in the first second reads as noise. Choose one primary move (scale) and one supporting move (fade). Add a third only if the first two feel flat.
2. A hold that is too short. If the logo is fully visible for less than a second, viewers cannot read it. Give it a comfortable hold, and make it a little longer if the sting stands alone.
3. Starting from a low-resolution PNG. Scaling up a 500-pixel image to fill a 1080p frame produces soft edges. Use a vector or a PNG at least twice the display size.
4. Mismatched frame rates. A 24 fps sting in a 30 fps project, or 29.97 against 30, causes dropped or doubled frames when an editor conforms the clip.
5. Late sound. If the audio peak lands after the logo settles, the animation feels disconnected. Put the peak on frame 6 or frame 18 and listen with the picture.
6. Exporting alpha as MP4. H.264 in yuv420p has no alpha channel. The transparent area fills with black, and you discover it only when you place the clip over footage.
7. Ignoring the vertical version. A logo placed for 16:9 can sit under a phone’s interface in 9:16. Build the vertical version with its own size and margins.

The first pitfall deserves a second look because it is the most tempting. Software makes motion cheap, and it is easy to keep adding. A useful test is to mute the sting and watch it with your eyes half closed. If you can still tell what the logo does in each block (in, hold, out), the motion is clear. If it turns into a blur of activity, remove something.

The second most common problem is judging the sting on a big monitor with the sound off. Test at least once on a phone with the volume at a normal listening level. Most viewers meet your intro on a small screen, and the logo size you chose for a desktop may look tiny there. Increase the logo size by 10 percent for vertical clips and check again.

Troubleshooting: 10 Problems and Fixes

When something goes wrong, work through the symptom list below. Each item names the cause first and then the fix.

1. The logo edges look jagged or soft. The source image is too small or you are scaling a raster layer past 100 percent. Use a vector file, or a PNG at least twice the display size. In After Effects, the Continuously Rasterize switch only helps vector sources.
2. The logo grows out of a corner. The anchor point is not centered. Use Layer, Transform, Center Anchor Point in Layer Content, or the Pan Behind tool, then re-center the layer in the composition.
3. The bounce expression throws an error. The expression needs at least one keyframe on the property, and the property must be Scale. Check that you pasted it into the Scale expression field, not Position, and that the engine setting for expressions is not set to a legacy mode that rejects velocityAtTime.
4. ffmpeg prints Invalid argument or fails on the filter graph. Commas inside the scale expression need quoting. Keep the expression wrapped in single quotes, and keep the whole filter graph in double quotes. If you paste the script from a web page, check that quotes stayed straight and were not turned into curly quotes.
5. The logo shimmers or flickers during the zoom. Odd pixel widths cause sub-pixel resampling jitter in some players. The script rounds to an even width with round(x/2)*2. If you edit the formula, keep that wrapper.
6. The transparent area is black in the final file. You exported alpha as MP4, or the editor ignored the alpha channel on import. Switch to WebM with VP9 alpha or ProRes 4444, and in your editor confirm the clip’s alpha interpretation is set to straight or premultiplied as the file expects.
7. Colors look different in a browser than in the editor. The file is untagged, so players guess the color space. Add the Rec.709 tags as the script does: -colorspace bt709 -color_primaries bt709 -color_trc bt709. Then compare in two apps.
8. The audio starts late or the sting seems to lag. AAC adds a small priming delay, and a tone placed at exactly the first frame can feel late. Move the audio peak earlier by 2 to 4 frames, or raise the adelay value in the script to move it later when you want it to land on frame 18 (600 ms).
9. The GIF is huge or banded. You skipped the palette step, or the frame rate and width are too high. Use the two-pass palette command, drop to 15 fps and 480 pixels, and reduce max_colors to 64 if size still matters.
10. The preview stutters in After Effects. RAM Preview at full resolution on a complex comp can drop frames. Switch the preview resolution to Half, close unused panels, and render a proper test export before you decide the motion is uneven. If the app freezes, Adobe’s help page says Auto-Save can restore work, so reopen the project and look for the latest backup.

If none of these match, make a one-second test render and compare it with the frame map from the first section. Most remaining problems are off-by-a-few-frames errors in a keyframe or a fade start, and they are easy to spot once you scrub frame by frame.

Advanced Tips for Better Logo Animations

Once the basic sting works, these upgrades add polish without adding length. Try them one at a time, since every addition risks the clarity you built in the first pass.

Add a light sweep. Duplicate the logo layer, fill the copy with white, and set its blend mode to Add. Animate a gradient or a mask edge across it from frame 18 to frame 40. The sweep should be quick and subtle. It adds a small highlight after the logo lands, which gives the hold some life without changing the logo’s position.

Animate parts of the logo. Because you converted the vector to shape layers, you can offset the entrance of individual pieces by two or three frames. In the placeholder, the circle could arrive first and the triangle two frames later. A stagger of two to four frames reads as intentional, and anything beyond six looks like a mistake.

Build a loop version. Streamers often need a logo that cycles on a start screen. Create a short composition, repeat the hold, and add a slow breathing scale. Make the first and last frames identical so the loop does not pop. Export it as WebM with alpha for an overlay.

Use depth carefully. Adobe’s beta channel reportedly includes experimental 3D materials on text and shapes, listed in beta build 27.0.41. Beta features can change or vanish, so use them for experiments and not for client work that needs to reopen next year. A shallow depth-of-field blur on a background plate gets you most of the way there with released tools.

Batch your variants. Once the ffmpeg script works, wrap it in a loop for every logo and format your brand needs. The snippet below produces six files from three logos and two aspect ratios, each named so the QA script picks up the right spec.

#!/usr/bin/env bash
set -euo pipefail

for logo in brand_a brand_b brand_c; do
  ./make_sting.sh "${logo}.png" "${logo}_16x9" 1920 1080 600
  ./make_sting.sh "${logo}.png" "${logo}_9x16" 1080 1920 700
done

python3 qa_check.py brand_*_16x9.mp4 brand_*_9x16.mp4

The loop stops on the first failure because of set -e, and the QA script returns a nonzero exit code if any file misses spec. That pairing is what makes the project dependable when you run it unattended.

Match the sound to the brand. A bright, high tone suits a friendly brand. A low sweep or a soft thud suits a serious one. Keep the level around -16 dB and avoid long tails, because the hold already carries the weight.

Watch for flashes. Fast white-to-black cuts can bother light-sensitive viewers. Keep any full-frame flash out of your sting, and avoid more than three bright pulses in a second. A fade is always safer than a strobe.

Plan the handoff. Deliver the MP4, the alpha file, the source project and a one-line spec note: size, frame rate, length and codec. The note takes two minutes to write and saves your client an email.

Before You Render

These are the questions readers ask most when they build their first logo animation.

How long should a logo animation be?

Three to six seconds covers nearly every case, and five is a safe default. Split it into a short entrance, a longer hold, and a short exit. Shorten the hold first if you need to trim.

What is the best way to animate a logo for free?

The ffmpeg project in this tutorial costs nothing and produces an MP4 with sound, a WebM with alpha and a ProRes file. Adobe Express and Canva both have free tiers for quick social clips, but you get less control over timing than a script or a timeline gives you.

Do I need After Effects to animate a logo?

No. After Effects gives the most control over easing and lets you animate parts of a vector logo, but a script or a web tool can produce a clean sting. The timing numbers in this article work in any tool.

Which file format keeps my logo transparent?

Use WebM with VP9 alpha for web and browser sources, ProRes 4444 for editing apps, and a PNG sequence for hand-offs. MP4 with H.264 cannot store alpha. Test the file in the app that will play it, since alpha support varies.

Can AI generate an animated logo from a prompt?

It can generate motion, but generative video models often alter letters and fine strokes. Use AI for backgrounds and light effects, and place your real logo on top as its own layer so the mark stays accurate.

What frame rate should a logo sting use?

Match the video it will join. Use 30 fps for most web video, 24 fps if your footage is 24, and 60 fps only if your main video runs at 60. Avoid converting the frame rate after the render.

Why does my logo look blurry after export?

The usual cause is a low-resolution source scaled up, followed by heavy compression. Start from a vector or a PNG at least twice the display size, and use a constant-quality setting such as CRF 16 for the H.264 export.