A logo spends most of its life sitting there. For about two seconds, at the top of a page, at the front of a reel, on the screen behind a counter, it gets to move instead. That is the whole product here: one mark, built to draw itself in, delivered in the file formats each of those places will take, with the still frame it settles on treated as the thing that matters. Motion is the introduction. The last frame is what people look at for the rest of the visit.
The Mindset Affiliates lockup is nineteen separate shapes. Left alone they appear all at once and read as a picture. Given an order and a little time, the same nineteen shapes read as something being made. Nothing was added to the logo to do this. The order is the whole trick.
Every letter is timed off the length of its own outline, so the M and the A get more time than the I. That is the difference between a logo that draws and a logo that snaps through at a fixed rate and reads as a gif from 2011. With motion turned off in the operating system, the loop never starts and the lockup renders finished. Same with JavaScript blocked. There is no state where a visitor sees an empty outline and nothing else.
The right one depends on the mark, not on taste. A logo built from long continuous strokes has something to draw. A solid shape does not, and forcing a draw-in onto it produces a slow outline nobody asked for. These three suit marks that are shapes rather than lines.
The mark is revealed left to right behind an invisible edge. Works on solid shapes, reads as confident rather than clever, and it is the cheapest of the four to render at small sizes.
It lifts into place and settles. The shortest of the set, which makes it the safe pick for a site header where the visitor came to do something else and the logo is not the point.
A turn and a scale into position. The most character of the three, which also makes it the one to keep for video intros and to keep away from anything a visitor loads twenty times a week.
One mark, three arrivals, and the finished frame is identical in all three. That is the point of picking a style rather than commissioning an animation: the logo does not change, only the way it gets on screen. If the mark itself is still unsettled, that gets fixed on the brand refresh first. Motion on a logo nobody has agreed to is a trick, and it wears off.
Five places, and they are the reason the deliverable is a set of files rather than one video. Each of these accepts a different format, and a mark that only exists as an MP4 is a mark that can only go in one of them.
It plays once, on arrival, and then the header lockup is static for the rest of the session. Nobody wants a logo redrawing itself every time they scroll back to the top. Ships as inline SVG so it is sharp at any size and costs a few kilobytes.
Two seconds at the top, occasionally two at the end. Ships as a transparent MP4 and a WebM so it can sit over footage instead of on a coloured card, plus a version on solid ground for editors whose software will not take an alpha channel.
A monitor at the counter, a lobby display, a booth. This is the one place a loop is correct, because there is no visitor whose visit it interrupts. Ships longer, slower and with a hold on the finished frame.
Mail clients strip live SVG and CSS animation, so the only thing that plays in an inbox is a hosted GIF or APNG. Ships small, short and with a still fallback, because a fair number of readers will never load the image at all.
The mark doing something while the system does something. Ships as Lottie JSON so a developer can start and stop it in code, rather than as a video file nobody can control.
This gets written into the rules that ship with the files, because the failure mode of a nice animation is that it ends up everywhere.
At sixteen pixels there is nothing to see moving, and half the surfaces do not support motion anyway. The still monogram is the asset here, drawn to hold at that size rather than shrunk down from the full lockup.
The draw-in is for arrival. A visitor moving through six pages should see it once. Rerunning it on each page turns a nice touch into a delay they have to sit through six times.
Obvious, and worth saying because the still frame the motion lands on is the one that gets cut in vinyl. If the last frame is not exactly the approved lockup, the animation quietly created a second version of the logo.
There is a fourth: anything that plays automatically over the top of what someone came to read. A mark that draws while the page is still loading is fine. A mark that holds the page hostage while it finishes is a splash screen, and those went away for a reason.
One animation, exported the six ways the places above will accept it, so nobody has to come back and ask for a version that works in the thing they are using.
Both with a transparent version and a version on solid ground, at the sizes an editor and a social upload each want. This is what goes at the front of video.
The two formats an email client will play, kept short and light on purpose. APNG for the clients that render it properly, GIF as the one that works everywhere else.
The vector plus the stylesheet and the small script that runs it, the way the rig further up this page works. Sharp at any size, a few kilobytes, and a developer can drop it straight into a header.
For app and product work where the animation has to be started, stopped or scrubbed in code. Same motion, driven by the interface instead of by a timer.
The first frame and the last frame pulled out as their own files, in light and dark, transparent and solid. The last frame is the one that matters most, and it has to match the approved lockup exactly.
One page. How long it runs, where it plays once, where it loops, where it does not go at all, and the minimum size below which the still mark is used instead. Written so the next person to touch it does not have to guess.
Four steps. The first one is the one people skip, and it is the one that decides whether any of this works.
Whether it is built from strokes or from solid shapes decides which arrival suits it. A shape logo forced into a draw-in looks like a coloring book. This is a look at the vector, not a taste conversation.
Where it lands gets locked before anything moves, because that frame is the logo and everything before it is decoration. If the file is uneven or was traced from a picture, it gets cleaned here or the motion magnifies the flaws.
Order, duration, easing, and how much each piece overlaps the one before. Timed off the geometry rather than a flat rate, so no piece is rushed and none of it drags.
Every format above, checked in the place it is meant to play, plus the one page of rules. A file that has not been tested in an actual inbox is a file that has not been delivered.
Most logo animations fail on one of these five, and it is almost never the drawing that was the problem.
Long enough to register, short enough that nobody waits. Video intros get a little more room. Anything past three seconds is a title sequence, and a title sequence needs a reason.
An empty box that fills in later reads as a page that failed to load. The opening frame has something in it, even if that something is a single stroke.
Pixel for pixel. If the animation settles a hair off, it has quietly created a second logo, and that is the version that ends up on the truck.
A logo animation that slows the page down has cost more than it added. The vector version is a few kilobytes. The video versions are compressed for the surface each one plays on.
Motion turned off in the operating system, scripting blocked, an email client stripping the image, a printer. All four end up looking at the still mark, and all four are handled before delivery.
The fifth one is the one that gets skipped, and it is the reason this page renders a finished lockup with scripting off rather than nineteen empty outlines. The version of your logo that a visitor sees when everything fails is still your logo.
Not consciously, and that is the point. What people notice is whether a business looks like it was put together on purpose. Two seconds of motion at the top of a page is a small signal that somebody thought about the details, in the same category as a site that loads fast and a form that works. The businesses this matters to are the ones charging enough that a visitor is checking whether they seem real.
Usually. It needs a clean vector, not a picture of a logo. If all that exists is a JPG or a low-resolution PNG, the file gets rebuilt as a vector first, because motion enlarges everything that is uneven about a traced edge. If the mark itself is not settled, that is a brand refresh question and it comes first.
Because no single format plays everywhere. An email client will not run SVG or CSS. A video editor will not take a Lottie file. A site header should not be loading an MP4 to show a logo. Delivering one file means five of the six places it belongs cannot use it, and somebody ends up screen-recording the good version.
The header of the site, on first load. That is the highest-traffic surface most businesses have, and it is the one where the still frame gets looked at longest afterwards. If a site is being built or rebuilt anyway, the mark gets wired in during the build rather than bolted on after.
Bring the file you have, even if it is the wrong kind of file. Fifteen minutes is enough to say whether the mark suits a draw-in, a wipe or none of the above, and whether the vector is clean enough to move before anything gets quoted.
One mark · Every format · The last frame holds
Decides what the mark is, along with the palette, the type and the rules. Motion comes after that, never instead of it.
See the pageWhere the animated mark lands first and gets seen most. Built with the motion wired into the header rather than added on afterwards.
See the pageWhere a moment of polish has to earn the two seconds it takes. A logo that arrives well is worth more on a page someone is deciding on.
See the page