The moment a new logo gets approved on a white background is the worst moment to start animating it. Everything that will go wrong on video — a wordmark that collapses at 98 pixels, an outline built for print, transparent areas that turn into grey boxes in a compressed export — is invisible in the file the design team just signed off.
So the work runs in a specific order. Six checks, all of them cheap, all of them done before a single keyframe exists. Run them in one sitting and the animation is a twenty-minute job. Skip them and the animation is a rebuild. If you have not animated a mark before, the mechanics are covered in how to animate a logo; this piece is about everything that has to be true before that.
A Video Logo Is Not a Logo File
The first mental correction is that a video logo is not a different logo. It is the same mark, existing in a much harsher set of conditions, and that changes which decisions are load-bearing.
A print logo is viewed once, at a comfortable size, on a surface that does not re-compress it. A video logo is viewed in a 98-pixel avatar, at arm's length, after a lossy encode that has already thrown away fine detail, sometimes with a caption bar sitting over the bottom third of the frame. Nothing about that is a critique of the design. It is simply a different viewing condition, and the assets that survive it are built with those conditions in mind.
That is why the checks below are ordered the way they are. Small size first, because it is the decisive one and the most expensive to fix later. Then the technical properties, then the frame size, then the motion treatment, then the export. Reversing any of the first three costs a redraw. If you are starting from a mark that was never designed for motion at all, the constraints are collected in what logo animation actually requires.
Step 1 · Test the Mark at 98 Pixels
Export the mark at its real display size, put it on a phone, and look at it for one second. Not zoomed in, not on a monitor, not at full resolution with the file name next to it.
Three things usually fail. Thin strokes disappear entirely — a one-pixel hairline in the original becomes nothing after scaling. Negative space closes up, so counters fill in and letters merge. And any gradient flattens into a single mid-tone, which can silently change the colour relationship between the symbol and the wordmark.
The fix is not to redraw everything. It is to decide what the smallest placement shows. A symbol-only version for avatars and a symbol-plus-wordmark version for wide frames is the standard split, and it costs one afternoon rather than one rebrand.
Designing at a large canvas and deciding at the small size is the whole method, and it is the one habit that pays back on every asset afterwards. The same reasoning applies to the static version of a mark that ends up in a GIF: the format forces the same simplification, which is why the palette constraints behind a logo GIF are worth understanding even if you only ever publish video.
Step 2 · Confirm the Transparency Is Real
A logo file can look transparent and not be. Open the PNG on a dark background and check that the area around the mark is genuinely absent rather than a rectangle of white that the mockup background happened to hide.
This matters more on video than anywhere else, because the animated mark gets composited over photographic backgrounds — a talking head, a product shot, a night cityscape. A white plate behind the mark is immediately visible as a white plate, and no amount of motion design hides it. Half-transparent soft shadows are the other common failure: they read as a grey box once the encoder averages the alpha channel.
The safe formats are SVG and a PNG with a real alpha channel, and the difference between them is worth knowing before you export: PNG supports full alpha blending, while the GIF format is limited to a single fully transparent index per frame, which is why soft edges look ragged there — w3.org — PNG specification. If your only file is a JPEG, you do not have a transparent logo yet.
Step 3 · Decide the Smallest Frame First
Frame size is a design decision, not an export setting, and the smallest one in the set decides the composition.
Vertical 9:16 is the tightest crop in a normal content set — it has the least horizontal room for a wordmark, so it is where a lockup either works or has to be rebuilt. Square 1:1 is the safe middle for feed placements that crop aggressively. Horizontal 16:9 up to 4K covers YouTube, website heroes and anything on a screen in a physical room.
Build the vertical version first if the content is social-first, then adapt outward. Adapting from a wide master down to vertical is the mistake that produces the most redraws, because the composition was solved for room the vertical frame never had. If the lockup is the problem rather than the animation, the arrangement conventions are covered in logo video fundamentals.
Step 4 · Pick the Motion Treatment From the Mark's Own Geometry
The treatment should be readable off the mark itself. A geometric symbol with hard angles takes a mask reveal or a build from parts, because the geometry already suggests where the pieces come from. A circular or organic mark takes a radial scale or a settle. A wordmark that has to stay legible takes almost nothing — a short fade-up and a hold.
What does not work is choosing the animation from a list of effects and applying it to whatever mark is in front of you. That is the mechanism behind the recognisable mistake where a mark appears to move against its own shape, which audiences read as amateur even when they cannot explain why.
Two values decide the result more than the effect choice does: how many frames the entrance takes, and what happens in the two frames around the stop. An entrance under 24 frames at 24 frames per second reads as confident. An entrance of 40 frames reads as a wait. And a mark that arrives and stops dead reads as a jump cut rather than a movement, which is why a two-frame settle is worth adding before adding any duration.
Step 5 · Set the Technical Baseline Before You Animate
Write these four values down once and reuse them for every export, because platform specifications change and rebuilding from memory is how a set ends up inconsistent across channels.
Frame rate: 24 for anything with a settle and a hold, 30 where a platform re-encodes aggressively. Aspect ratios: 9:16, 1:1 and 16:9, all exported from one source so the timing stays identical. Duration: one to three seconds for an opener, two to six for a launch cut. And colour space: export Rec. 709 and do not improvise, because a saturated brand colour that shifts after transcoding is worse than any compression artefact and it will not be visible until the file plays on somebody else's phone.
The platform numbers are worth checking rather than assuming, since they differ more than people expect. Meta's Reels Publishing API documents its requirements explicitly — 9:16 aspect ratio, 1080 by 1920 pixels recommended with a 540 by 960 minimum, 24 to 60 frames per second, and H.264 or H.265 compression with a closed GOP of two to five seconds — developers.facebook.com — Reels publishing. As that specification shows, a one-to-three second opener sits well inside every published constraint, so the limiting factor is your own timing discipline rather than the platform's limits.
Step 6 · Watch It Muted and at Feed Size
The last check takes ninety seconds and catches the failures the other five cannot. Export the finished piece, play it on a phone at actual feed size, with no sound.
If the arrival still reads as deliberate with the audio off, the timing is carrying the work and the track is a bonus. If muting it makes the cuts feel arbitrary, the problem is in the cut points, not the music — and adding a whoosh or a riser will not repair a cut that sits a few frames off the beat. That is also where the frame-level precision of a metronome-like grid helps, and the underlying model of how timing is expressed across a duration is documented in the W3C's <a href="https://www.w3.org/TR/web-animations-1/">Web Animations specification</a>, which is worth a look if you want the vocabulary for what you are adjusting.
Watch it three times before you publish, not once. The first watch sees the logo. The second sees the timing. The third sees what a stranger sees, which is the only one that matters.
What Having a New Logo Changes About the Work
There is one structural difference between animating an established mark and animating a brand-new one, and it decides how much of the six-step order you can skip.
An established mark has already been through this filter in public. It has appeared at small sizes across years of assets, somebody has complained about a version that did not read, and the simplified variant probably already exists as a secondary file. The checks still catch problems, but the mark has usually been tested somewhere.
A new mark has been tested in exactly one context: a presentation, at a comfortable size, on a display that nobody was scrolling past. That is the most forgiving viewing condition the mark will ever encounter. The 98-pixel avatar has never been considered, the transparent export may not exist yet, and nobody has checked whether the outline that holds up at poster scale survives a video encode.
So the six steps are front-loaded on purpose: three of them — the small-size test, the transparency check and the frame decision — are checks on the source file rather than on the animation. Fixing them after the animation exists means redoing the animation. Fixing them beforehand costs an afternoon and, in most cases, one simplified variant of the mark.
If you want the short version of the whole discipline before committing to a full build, the anatomy of an animated mark — entrance, settle, hold — is set out in the styles that brands actually use, and it is easier to choose a treatment once you can name the alternatives: animated logo styles.
The Handoff Sheet
One page of numbers, kept next to the export files. It takes ten minutes to write once and it is the difference between a consistent brand and a set of files that each drifted a little.
Source file: the transparent SVG or PNG you animate from, with the simplified symbol-only variant saved separately.
Motion: entrance duration in frames, hold length in seconds, total duration, and the name of the treated case where the mark sits in its final state.
Technical: frame rate, the three aspect ratios, colour space, and the codec profile you export at.
Music: the track, its tempo in beats per minute, and confirmation that it is cleared for commercial publication.
Then run the six checks against that sheet at every rebuild rather than from memory. Nobody remembers a keyframe interval six months later, and the second version of a brand's opener is where inconsistency usually enters.
FAQ
What do I need for a new video logo to work?
A mark that reads at 98 pixels, real transparency in the file, a decided frame size, a motion treatment derived from the mark's geometry, and a technical baseline you reuse. The animation itself is the last step and the shortest one — most of the effort is in the checks that come before it.
Can I animate a logo I only have as a JPEG?
You can, but you will need to cut the mark out first. A JPEG has no alpha channel, so the area around the logo is a solid colour that will sit visibly on top of any video background. Re-export as a PNG with transparency or as an SVG before animating, and check the result on a dark background to confirm the alpha is real.
How long should a video logo animation be?
One to three seconds for a channel opener, two to six seconds for a launch or announcement piece. Anything longer is usually carrying three jobs at once — logo, title and tagline — and the fix is to delete two of them rather than to tighten the timing of all three.
Do I need different files for vertical and horizontal?
Different aspect ratios, yes; different timing, no. Export 9:16, 1:1 and 16:9 from the same source file so the entry duration, beat alignment and hold length stay identical. Only the frame around the mark changes, which is what stops a brand from looking like three different companies across three channels.
Should the animation loop or fade out?
Loop. An autoplaying video that returns to its first frame reads as one continuous object in a feed, while a fade to black reads as a clip that ended and gets scrolled past. Same footage, different file ending, measurably different watch time — so cut hard or loop, and reserve the fade for a website hero if you need one.
The Bottom Line
Do step one before you do anything else. Export the mark at 98 pixels, put it on a phone, look at it for one second — and if it holds up at that size, the other five checks are arithmetic rather than redesign. Every team that ends up redrawing an animation skipped that test, because the smallest placement is the only one that tells you the truth about the mark. You can run it on your own file in the browser editor in about ten minutes.