Animated Logos — When You Need One, the Formats, and How Not to Overdo It

Logos have started moving everywhere. A mark assembles from strokes in a video intro, pulses on an app's splash screen, waves in a story. Animation has become an almost mandatory chapter in the brand books of large companies and a source of pain for everyone else: commissioning it is expensive, and no beautiful reference tells you whether it will pay off. The answer is simpler than it seems, and it rests on one question: does the viewer have a pause at this moment. Where the user is already waiting, motion fills empty time and works for the brand. Where they're busy, it distracts. From that follow the scenarios, the formats and the rules of good motion.

Where animation pays off

The four working scenarios differ in detail, but one thing unites them: in all of them the viewer is already on pause.

• App splash screen. Loading takes a second or two regardless, and an animated mark turns that forced pause into a branded moment.
• Video intros and outros. YouTube clips, ads, webinars: 1–2 seconds of mark animation became an industry standard, while a static image at the end of a clip looks cheap.
• Stories and reels. In a moving feed a static mark loses the attention contest with its neighbours, and a light logo reveal holds the level.
• Loaders and micro‑interactions. A mark‑spinner instead of the stock throbber is where the brand lives inside the product, and the user is waiting on the server anyway.

Where it gets in the way

Remove the pause and the same animation starts working against you.

Site header. A permanently moving logo in the corner pulls attention away from the content the person came for. One discreet animation on page load or hover is acceptable; after that, stillness.

Print, signage, documents. The medium physically can't move, yet "animated logo everywhere" shows up in briefs regularly, and the client is later surprised by a separate line in the estimate.

Email. Animation in a signature means a GIF: extra weight, visual noise and a high chance the mail client shows only the first frame.

A borderline case is banners and presentations on exhibition screens. Formally the viewer walks past with nothing to occupy them, yet they have no pause either: the screen catches their peripheral vision for a few seconds. What works here is a slow loop without sharp movements, readable from any moment. An animation with a beginning and an end is something such a viewer simply never catches in full.

The split between "where they wait" and "where they're busy" also sets the requirements for the motion itself.

The rules of good motion

1. Animation reveals the mark. The best logo animations act out the symbol's meaning: an arrow flies, a circle closes, a letter assembles from strokes. Random bouncing and spinning add noise and say nothing about the brand.
2. 1–3 seconds. Longer, and the user starts waiting, and waiting is never forgiven. For splashes and intros the sweet spot sits around 1.5 seconds.
3. One playthrough. A looping animation in plain sight becomes an irritant. A loop is only acceptable in loaders, where it honestly means "working".
4. The final frame matches the canon. Animation always lands on the version of the mark described in the guideline; why the canon stays untouched is covered in the article on brand books.
5. Respect the vestibular system. Sharp flashes and shaking are out, and on websites honour prefers-reduced-motion: some users deliberately turn animations off and need a static fallback.

Formats: what to commission and where to use it

Lottie became the de facto standard for product animation: the designer builds the motion in After Effects, the Bodymovin plugin exports JSON, the developer wires up a player. Vector, negligible weight and control from code — speed, start on event, stop on the last frame.

SVG animation suits simple cases on a website. Reveals, strokes and fills animate with plain CSS right inside the vector you already have; how SVG is built internally is covered in embedding SVG on a website. No dependencies, no players.

Video (MP4, MOV, WebM) is for clips and presentations. If you need transparency, ask for MOV with an alpha channel (ProRes 4444) for editing, or WebM for the web.

How to prepare the source file for a motion designer

The output format is chosen, but animation quality is decided earlier, at the input. A motion designer works with your vector file, and the estimate depends directly on how that file is built.

The main requirement: the mark must be split into layers. A logo collapsed into a single path by Flatten resists animation, because there's nothing to move, and the designer will have to redraw the contours from scratch, which is billed separately. Checking is easy: open the SVG in Figma and look at the layers panel. Separate elements of the mark mean the file is ready. One single object means you need a better source.

The rest is smaller, but every point saves time. Text should be converted to curves, otherwise another machine substitutes a different font. Layers deserve meaningful names: "arrow", "circle", "letter Я" read better than "Path 47". Stray hidden objects and clipped masks are best removed in advance, because in After Effects they surface anyway and confuse the build.

And check the basics: animation needs a vector source. You can't build motion from a JPG; that needs conversion to vector first.

Five mistakes you notice immediately

The rules above describe how it should be done. In practice clients repeat the same set of misses, and all of them grow from wanting more for the same money.

Animation in place of a mark. The logo gets drawn "for motion" from the start, and it falls apart when static. Yet most brand impressions stay static — business cards, documents, the site header, print. So the mark comes first and the motion for it second.

Too much at once. Letters fly in from different directions, the mark spins, the background pulses. Attention scatters and the viewer remembers none of it. One movement per animation reads better than three.

Animation longer than the content. A two‑second intro before a fifteen‑second story clip eats a seventh of the running time. Short formats get their own shortened half‑second version.

No static fallback. An email, a PDF, a printed report and a user with prefers-reduced-motion all see the first frame. If that first frame is empty, they see nothing at all.

One file for every medium. A heavy MP4 gets dropped into the presentation, the website and the app alike. Each medium needs its own format from the table above, which is why the brief specifies a package of exports.

What it costs and what to put in the brief

The market is tiered, just like the market for logos themselves; we covered it in how much a logo costs. Template animation in online services is cheap and looks generic. A freelance motion designer charges a mid‑range fee and builds an individual scenario. A studio costs a lot but delivers the scenario, sound design and a package of formats for every medium at once.

The brief is worth pinning down on four things: usage scenarios (splash, intro, stories?), the formats you need from the table above, duration and whether there's sound. And on delivery, accept the After Effects source plus exports in every agreed format. The source is mandatory: without it only the same contractor can make the next edit, and they'll set the price themselves.

How to tell whether you need animation at all

Before going to a motion designer, answer three questions. Does the brand own a medium from the four scenarios above: an app with a splash screen, regular video, active stories, a product with loaders? If none of them, the animation becomes a file with nowhere to go.

The second question is about the static mark. Has it settled, and is a rebrand off the table for the next year? Animating a logo that will soon change means paying twice.

The third is about the source. Does a layered vector file exist somewhere? Without it the estimate grows by the cost of a redraw before work on the motion even begins.

Three yeses mean the animation will pay off. A single no means the money is better spent on static identity, which works across every medium at once.

The bottom line

Logo animation pays off precisely where the viewer already has a pause: splash, intro, story, loader. Everything else turns into an attempt to entertain someone who's busy, and they will notice. The formula for good motion follows from that same pause: the animation acts out the mark's meaning, fits into 1–3 seconds, plays once and lands on the canonical version of the logo. Formats follow the medium: Lottie for the product, video for clips, GIF only when there's no choice. And it all starts with a vector source split into layers.

Vector sources for hundreds of brands sit in our logo catalog: download the SVG and hand your motion designer a proper base instead of a screenshot.