Animated Logos — When You Need One, the Formats, and How Not to Overdo It
Logos have started moving everywhere: the mark assembles itself from strokes in a video intro, pulses on an app splash screen, waves in stories. Animation has become a near‑mandatory chapter of big brand books — and a torment for everyone else: do you need it at all, which format to order, and why does a transparent GIF look so bad? Let's treat logo motion pragmatically: scenarios, formats, budgets and the limits of good taste.
Logo animation is seasoning for four scenarios: splash screens, video intros/outros, stories and loaders. It complements the static logo, never replaces it. Formats by purpose: Lottie for sites and apps (light, vector), video with or without alpha for footage, GIF only as a last resort (heavy, dirty edges). The golden rule: 1–3 seconds, played once, never looping in the user's face.
Why a logo should move (and when it shouldn't)
Scenarios that work:
- App splash screens. Loading takes a second anyway — an animated mark turns the pause into a brand moment.
- Video intros and outros. YouTube, ads, webinars: 1–2 seconds of logo motion is the industry standard; a static end card looks poor.
- Stories and reels. In a moving feed a static mark loses; a light logo reveal keeps the level.
- Loaders and micro‑interactions. The mark as a spinner instead of the stock one — exactly where a brand lives inside a product.
Scenarios that don't:
- The site header. A constantly moving logo in the corner is an irritant pulling attention from content. One delicate animation on page load or hover — then stillness.
- Print, signage, documents — obvious, yet "animated logo everywhere" briefs keep appearing.
- Email. Animation in a signature means GIF: weight and noise with no benefit.
What good logo motion looks like
- Animation reveals the mark, not entertains. The best logo animations play out the mark's meaning: the arrow flies, the circle closes, the letter assembles. Random bouncing and spinning is noise.
- 1–3 seconds. Longer — the user is waiting, and brands aren't forgiven for waiting. The sweet spot for splashes and intros is about 1.5 seconds.
- One play. A looping animation in view is an irritant. Loops belong only to loaders, where they honestly mean "working".
- The final frame = the static logo. Motion always lands on the canonical mark — the one from the guidelines (why the canon is untouchable: the brand book article).
- Respect the vestibular system. No harsh flashes or shaking; on the web honor
prefers-reduced-motion— some users disable animation deliberately.
Formats: what to order, where to use
| Format | What it is | Where | Weight |
|---|---|---|---|
| Lottie (JSON) | vector animation from After Effects | sites, apps | very light |
| SVG + CSS/JS | animation right in the code | sites | light |
| MP4/MOV | video (MOV — with transparency) | footage, decks | medium |
| WebM | alpha‑channel video for the web | sites | medium |
| GIF | raster frame‑by‑frame | messengers, legacy | heavy |
Lottie is the de facto product standard: the designer animates in After Effects, the Bodymovin plugin exports JSON, the developer drops in a player. Vector, negligible weight, controllable from code.
SVG animation covers simple on‑site cases: reveals, stroke draws and fills animate with plain CSS inside the vector you already have (how SVG works inside: embedding SVG). No dependencies, no players.
Video (MP4/MOV/WebM) is for footage and presentations. Need transparency — request MOV with alpha (ProRes 4444) for editing, WebM for the web.
GIF physically can't do semi‑transparency: a pixel either has color or doesn't. Hence the dirty fringe around the mark on any background other than the one it was rendered against. Add 256 colors and indecent weight. Use GIF only where nothing else works — and render it against the specific background color.
Cost and commissioning
The market is a ladder, like the logo itself (see how much a logo costs): template animation in online services — cheap and generic; a freelance motion designer — mid‑range with a custom scenario; a studio — expensive, with a script, sound design and a format package for every carrier.
The brief must include: usage scenarios (splash? intro?), the formats from the table, duration, sound or not. The delivery must include: the After Effects source plus exports in every agreed format. The source is non‑negotiable — without it, only the same contractor can ever change anything.
And check the foundation: animation needs a vector logo source. You can't animate a JPG — vectorize first.
In short
An animated logo amplifies four moments: splash, intro, stories, loader. The good‑motion formula: the mark's meaning → 1–3 seconds → one play → landing on the canon. Formats: Lottie for product, video for footage, GIF — never, given a choice. And it all starts with a clean vector source.
Vector sources for hundreds of brands are in our logo catalog: download the SVG and hand your motion designer a proper base instead of a screenshot.