logoto.video logologoto.video
Início
GuideSep 28, 202611 min

Slow Motion Logo: How to Time a Brand Mark

Slowing a logo down is the most requested and most botched job in brand motion. The timeline is not the dial that matters.

Many logo animations are built to be watched once and never scrubbed. Then the mark goes into a channel avatar, a briefing deck, a print flyer or an email header, and the same file has to hold still. Slow motion logo work is the craft that closes that gap: it lets one piece of motion serve both the viewer who sees it animate and the viewer who only ever sees frame 92.

This is not a style piece dressed up as technique. Slowing a logo down is the single most common request in brand motion and also the one that most often goes wrong, because the fix most people reach for, stretching the timeline, breaks the two things that make motion feel intentional: the interval between events and the shape of the easing into each one.

Why Slow Motion Logo Work Is Different From Slow Motion Video

Slow motion in film exploits a physical camera. Shoot at 120 frames per second, play at 24, and the resulting four-times stretch reveals detail the eye never catches in real time: water breaking, fabric rippling, hair moving. The material being slowed has continuous motion underneath it, and the extra frames are genuinely new information.

A logo has no continuous motion underneath it. It has discrete events: the mark appears, settles, holds, leaves. Slowing a logo down does not reveal detail inside an event, it widens the gap between events. And that is where logos stop working, because the perception of speed lives in the gaps rather than in the movement itself.

The practical consequence is that slowing a logo down is a restructuring job, not a playback-rate job. The events stay roughly where they were supposed to be relative to the beat. What changes is how much dead air sits between them, and how the mark behaves during it.

What Actually Changes When You Slow a Logo Down

Three variables move at once, and each one has a threshold at which it stops helping.

The gaps between events expand, and that is the real cost

A mark that enters and settles in 0.6 seconds feels decisive. Stretch the same entrance to 2.4 seconds and something odd happens: it does not read as the same move, performed slowly. It reads as a hesitant move. The reason is that the human eye tracks endpoints, not duration, and an entrance whose start and end are two and a half seconds apart implies uncertainty about where the mark belongs.

Easing shape becomes visible, and then becomes the whole design

At normal speed, an easing curve is nearly invisible. The mark accelerates in and decelerates out, and nobody consciously notices. Stretch that curve and the shape becomes the perceived character of the animation.

This is where the choice of curve stops being a technical detail. As <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/easing-function">MDN's reference on easing functions</a> sets out, the families are cleanly separated: linear interpolation, the classic cubic Bezier curves for ease-in and ease-out, and the spring-style curves that overshoot and settle. At speed, ease-in-out and a spring settle look similar. Slowed down, they read as two different brands.

A cubic ease-out stretched over two seconds communicates weight and composure. A spring with overshoot stretched over the same two seconds communicates playfulness and feels like it is taking too long to stop. Neither is wrong in the abstract. One is wrong for a law firm and one is wrong for a skate brand.

Hold time doubles as the pause nobody designed

Hold time is the least designed part of most logo animations and the first thing that becomes unbearable when the animation slows. A one-second hold is invisible at speed. A four-second hold on a static mark is a long time to look at something that is not doing anything.

The Frame Rate Trap

The obvious way to slow a logo animation is to lower the frame rate, or to render at the same frame rate and stretch the timeline in playback. Both produce a recognizable defect at logo scale.

At 12 frames per second, a logo mark with clean geometric edges starts to judder. The problem is the edges themselves: a hard vertical line moving two pixels per frame reads as a stutter, while the same line moving one pixel per frame reads as smooth. Video footage hides this because every frame carries grain and micro-detail, and the eye has nothing crisp to track against. A vector logo has nothing but crisp edges.

The rule that follows is that frame rate is not a slow-motion dial. Keep the delivery frame rate at the level the platform expects and change the animation itself: lengthen the interval between events, choose the easing curve for the character you want, and shorten the holds.

There is also a delivery constraint worth knowing. Platform re-encoders make assumptions about frame rate and keyframe spacing, and a file that sits well outside the expected range gets re-encoded more aggressively. <a href="https://developers.google.com/search/docs/appearance/video">Google's guidance on video content for Search</a> describes the formats and signals it evaluates, and staying inside the delivery norms of the platform is what keeps a short clip from being mangled on the way in.

When Slower Is Actually Better

There is a legitimate case for real slow motion in logo work, and it is narrower than most people assume.

The clearest one is a long-form piece: a brand film, a launch video, a documentary opener where the logo appears at the end over a resolving score. In that context the mark has earned attention and the audience is not waiting to skip past it. A three- or four-second resolve reads as confidence rather than as a delay.

The second case is a mark that depends on a detail. If your logo contains a flourish, a ligature or a constructed element that is the actual idea of the brand, showing it being drawn over two or three seconds can be the whole payoff. The slow motion is doing informational work: without it, the detail is never seen.

Outside those two, slow is usually a substitute for a decision. If the entrance feels too abrupt, the honest fix is often to change the entrance, not to stretch it.

How Slow Is Too Slow: The Timing Bands

The useful numbers come from how people experience interface delays rather than from motion design folklore. As <a href="https://www.nngroup.com/articles/response-times-3-important-limits/">Nielsen Norman Group's research on response time limits</a> records, under about one tenth of a second, an interaction feels instantaneous; around one second, the user notices a delay but their flow is uninterrupted; at ten seconds, attention is gone entirely. Motion sits inside that first band, and the interesting question is not where it becomes painful but where it stops reading as motion and starts reading as waiting.

For a logo animation, that boundary lands earlier than most people expect.

A working set of bands, in terms of the duration of the entrance event alone:

Under half a second: the mark arrives. This reads as a cut with a soft edge, and it is the right register for a fast-moving feed. Half a second to one second: the mark makes an entrance. This is the widest useful band and covers most brand motion, including the versions that look deliberate rather than hurried. One to two seconds: the mark performs. It works when the movement itself carries information, such as a detail being drawn. Past two seconds: the mark is making the viewer wait, unless the format has earned a longer attention span, which a social feed has not.

Here is the same material as a decision list rather than a set of paragraphs, because most of these calls are made in a hurry:

Feed placements such as Reels, Shorts and TikTok, keep the entrance under half a second and the total clip under two seconds. Everything is muted, everything is scrolled past, and there is a competing thumbnail immediately on either side. A channel opener or a video intro can take a full second, because the viewer has already committed to watching. The mark is competing with the content, not with the algorithm, and one second of arrival is a normal cost of entry. Long-form brand film or documentary end cards, two to four seconds is defensible, because the score is resolving and the audience is present. Presentation or pitch contexts are the outlier: a slide deck is not a feed, and a mark that animates across a full second while a room waits is one of the few places where the slow version is unambiguously correct.

Building the Slow Version Properly, Step by Step

If you have decided the slow version is right, there is an order of work that avoids the usual rework.

Fix the last frame first

Decide exactly what the mark looks like when it is at rest and how long it rests. For a slow animation, the resting frame is on screen for a larger share of the total time than in a fast one, so it is not a transition state, it is the product. Settle it at full resolution before touching the entrance.

Set the arrival time and work backwards

Choose the moment the mark becomes whole, then decide how long the approach takes. Working backwards from a fixed landing point prevents the drift that happens when the entrance is designed first and the landing point is wherever it happens to end up.

Pick the curve by character, not by default

Ease-out for weight and control, ease-in for departure, a subtle spring only when the brand can carry the playfulness, and near-linear when the movement is a transition rather than an arrival. Then check the curve at the final duration rather than at speed, because it will read differently than it did in the preview.

Cut the hold, then cut it again

Holds stretch, and stretched holds are the single most common reason a slow logo animation feels broken. If the hold was a quarter of a second at speed and the animation is twice as long, do not make it half a second by default. Decide what the resting frame is supposed to communicate and make the hold as short as that allows.

Confirm the stills still work

Before exporting, take the resting frame and reduce it. If the same asset is going anywhere small, a channel avatar, an email signature, a favicon, the resting frame is what will be seen at that size and it has to survive the reduction. This is the same test that applies to any brand mark, and it is the reason animating a logo and designing a logo are less separable than they look.

The Compressed-Delivery Problem

A slow animation is more expensive to deliver than a fast one made from the same design. Longer duration at the same frame rate means more frames, and more frames means a larger file, which is a problem for anything loaded on a phone over a mobile connection.

The practical fixes are unglamorous and effective, and they start with <a href="/logo-animation-templates/logo-animation-video">export settings chosen for flat graphics rather than for footage</a>. Trim the clip to the events that matter rather than the timeline you built. Render at the delivery resolution rather than at 4K and downscale. Choose an encoder setting appropriate to flat graphics rather than to photographic footage, since a logo animation with large areas of solid color and sharp edges compresses efficiently when the encoder is told what kind of content it is looking at. <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Video_codecs">MDN's guide to video codecs</a> covers which codec families are supported where, and it is worth reading before choosing an export preset you cannot explain.

If the animation also needs to load lazily on a page, the browser-level techniques for deferring media until it is needed are covered in <a href="https://web.dev/articles/lazy-loading-video">web.dev's guidance on lazy-loading video</a>, which is the difference between a page that opens instantly and one that stalls on a decorative element.

One more option worth remembering: not everything has to be video. If the mark is simple and the animation is a reveal or a loop, a vector animation delivered in the browser can be lighter than any video file and sharper at every size. The <a href="https://www.w3.org/TR/web-animations-1/">web animations specification</a> describes the timing model that runs those animations, and it includes duration, delay and easing as first-class parameters, which makes the same slow-motion reasoning apply.

The Four Second Rule Nobody Follows

If there is one habit that separates logo animations that age well from ones that get replaced, it is this: build the fastest version the brand can tolerate, and then decide whether anything is actually gained by adding time.

Almost every slow logo animation in the wild was slowed because the fast version felt abrupt, and almost none of them were then compared against a version that fixed the abruptness instead. Sharper easing solves abruptness. A longer entrance mostly adds waiting. The two feel similar in a preview and behave completely differently in use, because one is a property of the movement and the other is a cost imposed on every viewer who has already decided to watch.

The Bottom Line

If you take one thing from this, make it the order of operations. Settle the resting frame, set the arrival moment, choose the curve for character, then cut the hold until it hurts. Frame rate is not a slow-motion dial, and a longer timeline is the least interesting way to buy time. When the brand genuinely needs a mark that performs rather than arrives, slow it down properly. When the entrance merely feels abrupt, sharpen the easing and leave the duration alone. The same reasoning applies whether the animation is built by hand or timed numerically in a browser editor.