A logo animation has one job: show the logo, clearly, a moment sooner and a little more memorably than a still would. This guide goes from a logo file to the right animated file for each place it goes. The steps use Lumorig, which we make, and every example plays on our own logo, but the advice on motion, length and formats holds for any tool.
1. Start from the right file#
- An SVG is best. Its shapes are already exact. A PNG or JPG works on a plain or transparent background, at least a few hundred pixels wide.
- Just the logo. Crop away anything around it: other text, a mock-up, a photo behind it.
- Flat colours animate best. Gradients and photographic detail trace into flat areas of colour.
Lumorig traces the file into pieces: the badge or plate it sits on, then each letter and mark, in reading order. Those pieces are what move, which is why a wordmark can come in letter by letter and still be exactly your wordmark.
2. Intro or loop?#
An intro plays once and holds the finished logo: a site's first screen, the start of a video, an app opening. A loop keeps going: a header, a loading screen, a hover. There are 28 intros and 16 loops; here they all are, on our logo.
- Fade inintro
Softly appears, growing a little, then holds
- Draw onintro
Its outline draws itself in, then fills with colour
- Wipeintro
Uncovered from left to right, then holds
- Fade + shineintro
Fades in, then a light sweeps across it
- Colour revealintro
Fades in grey, then its colour floods in piece by piece
- Neon signintro
Its outlines buzz on like neon tubes, then it fills with colour
- Mark + nameintro
The symbol pops in the middle, moves aside, then the name comes in
- Name from markintro
The symbol lands in the middle, then the name slides out from behind it
- Baselineintro
Each letter rises up out of its own baseline
- Unveilintro
Opens out from the middle to both sides
- Write onintro
Traced piece by piece like a pen, each filling as it's done
- Tracking inintro
Letters start spaced wide and close up into the word
- Revealintro
Pops in piece by piece, then holds
- Riseintro
Each piece fades up into place, one after another
- Typewriterintro
Letters appear one at a time, like typing
- Assembleintro
Its pieces fly in and lock together, then hold
- Drop inintro
Pieces fall in from above and bounce to a stop
- Pop inintro
Springs in from nothing, then holds
- Stampintro
Slams down from above with a jolt
- Slide inintro
Slides in from the left and settles
- Mergeintro
Pieces slide in from both sides and meet
- Spreadintro
Starts bunched in the middle, spreads out into place
- Flip inintro
Each piece flips round into view
- Tumbleintro
Pieces roll in from the side and land
- Stand upintro
Letters tip up from lying flat, one by one
- Roll inintro
Rolls in from the left like a wheel
- Jack in the boxintro
Springs up from tiny with a twist
- Neon flickerintro
Flickers on like a neon sign
- Idleloop
Breathes gently: a logo that's alive at rest
- Shineloop
A light sweeps across it every few seconds
- Colour runloop
Its second colour runs across the letters, then rests
- Floatloop
Hovers up and down, calm
- Pulseloop
Two quick beats, like a heartbeat
- Bounceloop
Hops and lands with a squash
- Wiggleloop
A quick shake for attention
- Tadaloop
Shrinks, shakes and grows: look here
- Jellyloop
Stretches wide and wobbles back
- Swingloop
Swings from the top like a hanging sign
- Spinloop
One full turn, then a rest
- Coin fliploop
Flips round like a coin
- Rippleloop
A wave runs through the letters
- Boploop
Letters bob to a beat, turn about
- Glitchloop
Jumps and jitters for a moment, then settles
- Scatterloop
Bursts apart and snaps back together
Match the motion to the logo#
| Your logo | Intros that suit it | Loops |
|---|---|---|
| A wordmark | Tracking in, Baseline, Write on, Typewriter | Shine, Ripple, Colour run |
| A symbol beside its name | Name from mark, Mark + name, Draw on | Idle, Shine |
| A badge or emblem | Draw on, Stamp, Reveal, Unveil | Idle, Pulse, Swing |
| A colourful mark | Colour reveal, Neon sign, Fade + shine | Colour run, Float |
Calm motions read as confident; a logo that bounces every two seconds reads as an ad. On a page people stay on, prefer Idle or Shine. Lumorig's players and animated SVG hold the logo still for visitors who ask their device for reduced motion, and its flickers stay under three flashes a second.
3. Cut it to the place#
| Place | Length | Why |
|---|---|---|
| An app splash screen | 1 s | Android stops a splash animation at one second, and people are waiting. |
| A YouTube or podcast intro | 2 s sting | Repeat viewers skip anything longer; save the full reveal for a launch film. |
| A site's first screen | Full, 2–3 s, then holds | Ends on the still logo, which is what people remember. |
| Reels, Shorts and TikTok | 2 s, at the end | The first second belongs to the content; put the logo on the end card. |
| A header or loading screen | A 2–4 s loop | Long enough to feel calm. |
Changing the length plays the whole motion faster or slower, so a 1 s splash still ends on the finished logo. Pick the frame at the same time: 16:9 for YouTube and slides, 9:16 for Reels and Shorts, 4:5 for feeds, square, or tight around the logo for signatures and headers.
4. Add sound only where it plays#
Stock logo stings pair the build with a riser and the lock with a hit. Lumorig makes that sound from the motion itself, so the hit lands on the exact frame where the last piece settles: whoosh, chime, plucks (a note as each piece lands) or digital.
- Add it to video intros: MP4, MOV and ProRes carry it.
- Leave it off on websites and in apps; pages that make noise get closed.
- Social feeds start muted, so the motion has to work without it.
- Editing your own film? Download the sound alone as a WAV and lay it under your cut.
5. Make an email signature that moves#
Use the email GIF, not the ordinary GIF. Classic Outlook for Windows shows only a GIF's first frame, so the email GIF opens on the finished logo, then plays. It is cropped close, on white, at most 640 px wide, and stops after two plays so it doesn't distract from the message.
Host the file on your own site and add it in your email app's signature settings as an image from a link, at 200 px wide or less. A link keeps the message small and lets you swap the logo later.
6. Ship the right file#
| Where it goes | File |
|---|---|
| A website or an app | Lottie or dotLottie: vector, a few kilobytes, sharp at any size |
| A page without JavaScript | Animated SVG |
| Slack, Notion, docs | GIF |
| Email signatures and newsletters | Email GIF |
| Video, social posts, slides | MP4, on a colour |
| Over footage in an editor, Keynote, OBS | ProRes 4444, transparent |
| Transparent video on a site | MOV (Safari) plus WebM (other browsers) |
7. Add a tagline last#
A web address or a short line under the logo turns an intro into an end card. Keep it under about 30 characters so it stays readable on a phone. In Lumorig, type it in Colours, pick Sans, Bold or Mono, and every intro brings it in as the logo locks. It has its own colour, so it can be quieter than the logo.
Ready to try it on yours? See every motion on our logo, or open the studio and choose Animate a logo.
Questions#
Can I animate a logo from a PNG?
Yes, on a plain or transparent background. An SVG traces most exactly. A JPG works too; avoid screenshots with other things around the logo.
How long should a logo animation be?
About 1 second for an app splash, 1 to 2 seconds for a video sting, and 2 to 3 seconds plus a hold of at least a second for a full reveal. Loops look calm at 2 to 4 seconds.
Will the animation change how my logo looks?
Not with a traced logo: the pieces are your own shapes in your own colours. Video generators redraw the logo on every frame, which is where misspelled letters and shifted colours come from.
How much does it cost?
In Lumorig, 60 credits a logo with every motion, length and sound included, and 10 credits to set a tagline. Free starts with 100 credits once; its first animation downloads free as a GIF, email GIF or PNG up to 512 px, or as Lottie, all with a small mark.
Does an animated email signature work in Outlook?
Classic Outlook for Windows shows only a GIF's first frame. Make that frame the finished logo (Lumorig's email GIF does) and Outlook users see your logo, while everyone else sees it move.