A logo animation brief usually arrives with a reference to something expensive and shiny. Close that tab first. The minimum viable principles and format requirements for a logo animation that works across web and social media are these: the animation must resolve to its static mark within seconds. It must not trigger vestibular discomfort. It must respect the prefers-reduced-motion media query from WCAG 2.2. It must ship in the lightest file format that preserves vector or near-vector quality. Everything else serves those four constraints. Logo animation basics are not about what After Effects can do. They are about what a logo must still do after the last frame: identify a company at a glance, in a favicon, in a one-colour print, and on a phone that has reduced motion turned on.

Logo Animation Duration Best Practice: How Long a Logo Animation Should Run

Duration is the first measurable constraint because it is the one most often violated. A logo animation that runs longer than it takes to read the company name has stopped being a logo and started being a commercial. The common logo animation duration range across the industry is 2 to 10 seconds, but the practical window for web and social is tighter.

Duration Rules For Social And Web

Typical social media logo animation duration sits at 3 to 5 seconds. If you are producing a pre-roll stinger for a video platform, the first frame of the mark should appear by second one and the animation should be done by second three. The failure case is the 10-second epic that starts with a spinning globe and ends with the logo assembling itself particle by particle. Nobody sits through it twice. On a platform with autoplay muted, the first two seconds decide whether a viewer scrolls past.

The reason the window is brief is not attention span; it is memory. A logo animation that resolves to its static end state quickly trains the viewer to associate the motion with the mark. A long animation teaches the viewer to ignore the mark.

What To Do When The Client Demands A Longer Animation

When the client insists on a longer animation, or when the platform demands a 15-second version for a TV slot, do not stretch the keyframes. Cut the animation to its core two or three moves and then hold the final frame. The final frame is the logo. If the final frame fails the one-colour test or the favicon test, the animation has failed. A 5-second loop that repeats every 8 seconds with a 3-second pause between loops is the maximum acceptable cognitive load. Even that pause may be too short for a viewer who is reading text next to the animation.

Logo Motion Design Principles: Easing, Keyframes, and the One-Colour Test

Motion design principles for logos borrow from the twelve Disney principles of animation published in 1981, but only a few of them survive contact with a 40-pixel favicon. Squash and stretch, anticipation, follow-through, and secondary action are real tools. Each one must be applied to a moving mark that will also exist as a static vector.

Easing And Keyframe Interpolation

The principle that matters most is easing, the interpolation between keyframes that determines whether an object accelerates or decelerates. Linear keyframe interpolation is for machines. An eased motion using a cubic-bezier() curve makes a logo feel designed rather than driven by a motor. The primary keyframe interpolation types are linear, bezier, hold, auto-bezier, and continuous bezier. In practice, you will use bezier curves for almost everything. Set the first keyframe to start slow and the last keyframe to end slow unless you are deliberately creating a mechanical effect. Ease-out is usually the right choice for a logo that enters and stops. Ease-in-out is right for a logo that moves through a position and settles. What is almost never right is a logo that moves with linear velocity. The human eye tracks acceleration and deceleration naturally, and a constant-speed logo reads as cheap.

The One-Colour And Favicon Tests

The one-colour test is the discipline that keeps the animation from corrupting the identity. Take the final frame of the animation, convert it to black on white and white on black, and check that it still reads. If the animation relies on colour to distinguish two shapes that become a single blob in one colour, the animation fails. The same applies to the favicon test: the end state of the animation, scaled to 32 by 32 pixels, must be recognisably the same mark that appears in the browser tab and the app icon. If it is not, the animation has failed at the exact moment it was supposed to succeed.

Animated Logo File Formats: SVG, Lottie, MP4, and the Case Against GIF

Animated logo file formats are where most production decisions go wrong. The format that is easiest to export is rarely the one you should ship.

Vector-First Formats: SVG And Lottie

The correct web-first format for a logo animation is SVG with CSS animation. It is resolution-independent, scales to any size, and can be kept under 10 KB for a simple mark. CSS animation keyframes are defined in the W3C CSS Animations Level 1 working draft, and the @keyframes rule is supported in every modern browser. If you need cross-platform vector motion and you are building a mobile app or a web app, Lottie is the answer. It is a JSON file that renders vector animation natively, introduced by Airbnb Design in 2017. The renderer libraries keep the same animation identical across platforms. A Lottie file for a logo should be under 50 to 100 KB; if it is larger, your animation has too many layers or too much complexity.

Raster Fallbacks: MP4, WebM, And ProRes

MP4 with the H.264 codec is the raster fallback. Ship it to a platform that does not support vector animation or for a video editor that needs a standard file. The catch is that H.264 does not support alpha channels, so an MP4 logo animation on a transparent background is impossible. If you need transparency in a video file, you need WebM with alpha, APNG, or a ProRes 4444 MOV for broadcast. The alpha channel requirement is not optional if the logo will overlay footage or a photograph. Most social media platforms will flatten or letterbox a video that lacks it.

Why GIF Is The Wrong Choice

GIF is almost never the correct choice. The file weight is the first problem: a 5-second GIF at a modest resolution can weigh 5 MB or more. The colour palette is limited to 256 colours, which destroys the smooth gradients in most modern logo designs. The frame rate drops to keep the file size down, and the result is a choppy, banded, heavy file that fails both the weight and the colour tests. The exception is a platform that literally only accepts GIF, and those platforms are increasingly rare. When a client asks for a GIF, ask what the file is for, then deliver an MP4 or a Lottie and explain why the GIF will look bad and load slowly.

The decision tree is simple: for the web, use SVG with CSS animation. For apps and cross-platform, use Lottie. For video platforms and social media, export MP4 with a solid background or WebM with alpha if you need transparency. For broadcast, use ProRes 4444. GIF is the last resort, and it should lose to every other format here.

SVG Animation vs Video Logo: Which Format Wins and Why

SVG animation vs video logo is not a fair fight. It is a decision about the medium, not the quality of the animation. An SVG animation is code, so it can respond to user interaction, change its behaviour based on viewport size, and load instantly because it is part of the page's DOM. A video logo is a rectangular raster file that must be downloaded, decoded, and played. It cannot respond to anything.

When SVG Animation Wins

For a logo that sits in a website header, on a landing page, or as a pre-loader, SVG with CSS animation is the right choice. It is the lightest, fastest, and most accessible option. The file weight of an SVG logo animation is typically 5 to 15 KB, compared to 500 KB to 2 MB for an equivalent MP4. The SVG scales perfectly on a 4K screen or a 320-pixel-wide mobile viewport.

When You Need A Video Logo

The case for a video logo is when you need effects that SVG and CSS cannot produce. Complex particle systems, fluid simulations, 3D renders, and any animation that requires per-pixel effects like blur or glow are beyond the reach of declarative CSS animation. For those, export an MP4 or a WebM and accept the file weight. The trade-off is real: a video logo is a self-contained file that plays anywhere, but it is a heavy, fixed-resolution rectangle that cannot adapt to its container. The Web Animations API offers JavaScript-driven animation of SVG elements, but it is not a replacement for a video codec when the effect is genuinely cinematic.

What fails in practice is the hybrid approach. A designer builds an SVG animation, exports it as an MP4 because a client asks for a video, the MP4 is uploaded to a platform that compresses it, and the final result is a blocky, blurry shadow of the original. Decide the delivery platform first. For a website, ship the SVG. For a social media post, export a 1080 by 1080 MP4. For a TV commercial, export a ProRes 4444. Do not expect one file to serve all contexts, and do not let a platform's compression algorithms destroy the one-colour test you passed in the source file.

Motion and Accessibility: Vestibular Discomfort, WCAG 2.2, and prefers-reduced-motion

Motion in a logo animation is not harmless decoration. It can make a user physically ill. Vestibular discomfort, nausea, dizziness, and vertigo are triggered by large, rapid, or repeated motion. The Web Content Accessibility Guidelines (WCAG) 2.2, published by the W3C, treats this as a compliance issue, not a courtesy.

WCAG Criteria That Apply To Logo Animation

The relevant success criterion is 2.3.1, which limits flashing to no more than three flashes per second. Criterion 2.5.4 requires that motion triggered by interaction must be preventable unless essential. A logo animation that spins, pulses, or zooms indefinitely can violate both. This is why the CSS media query @media (prefers-reduced-motion: reduce) exists. The query is part of the Media Queries Level 5 W3C Candidate Recommendation from 2021, and it is supported in all major browsers. When a user has enabled reduced motion in their operating system, the animation should either stop entirely or resolve to its final frame immediately.

The Static Fallback Rule

The accessible animation rule is simple: the logo must have a static fallback. If the logo is a single SVG, wrap the animated elements in a rule that disables transition, transform, and animation when prefers-reduced-motion: reduce is present. If the logo is a video, the fallback is the poster frame, which should be the static logo. WCAG 2.2 also defines a contrast ratio of 4.5:1 for normal text and 3:1 for large text. This applies to the logo if it is a text-based mark. The contrast ratio formula is calculated from the relative luminance of the foreground and background colours in the sRGB colour space. An animated logo that changes colour during its motion must maintain that ratio at every point. The one-colour test is not just a design preference but an accessibility requirement.

Animations that loop infinitely without a pause are the most common failure. A logo that spins continuously has no end state, so the browser cannot respect reduced motion. Ensure the animation plays once, or at most three times, and then holds on the final frame. If a loop is necessary, add a pause of at least 2 to 5 seconds between loops. A logo animation that ignores reduced motion is a WCAG violation that can exclude users with vestibular disorders. It is the kind of judgement that gets a page sent back from legal, not just from the client.

What Is the Correct Frame Rate for a Logo Animation?

Frame rate measures how many individual images are displayed per second. The standard for logo animation is 24 frames per second (fps) for film and broadcast, 30 fps for NTSC video, and 60 fps for web and social media with motion interpolation. The minimum frame rate for smooth motion perception is 12 fps, but that is for strobe-like effects, not for a logo that needs to feel designed.

Choosing A Production Frame Rate

For a logo animation that resolves to a static mark, 24 fps is almost always the right choice for production. It matches broadcast standards and gives the animator enough frames to create natural ease. The final export for web can be 30 fps or 60 fps, but the higher the frame rate, the larger the file weight. A 60 fps logo animation that runs for 3 seconds carries data that a 24 fps version does not need. The Society of Motion Picture and Television Engineers (SMPTE) does not mandate a frame rate in its standards for title-safe areas, but industry practice does. 24 fps is the default in After Effects, and most animators leave it there unless a specific deliverable requires otherwise. For social media, exporting at 30 fps is safe; the extra frames over 24 fps smooth motion without a noticeable file size increase. A 60 fps export is only necessary if the animation contains camera motion or particle effects that would strobe at 30 fps. A logo animation rarely needs that.

The failure case is the animator who sets the composition to 60 fps to make the animation look smooth, then drops the bit rate because the file weight is too high, introducing compression artefacts. Animate at 24 fps, preview at 30 fps, and export at the frame rate of the target platform. Motion blur samples range from 8 to 32 per frame in After Effects, with 16 as the default; that is a production setting, not an export setting. If the logo animation is delivered as a Lottie file, the frame rate is baked into the JSON, but the renderer interpolates at the display's refresh rate. A 24 fps Lottie will play at 60 fps on a 60 Hz screen. The number that matters is not the frame rate you export but the frame rate at which the motion reads as intentional.

How Long Should a Logo Animation Be in Seconds, and What About Loops?

The question of how many seconds a logo animation should last is answered by the platform's autoplay rules and the viewer's patience. A logo animation that runs 3 to 5 seconds is the sweet spot for social media. For a website hero section, the animation can be longer, but it should not loop continuously unless the mark is designed to live in a state of subtle motion, like a gentle float or a shimmer. The moment the animation becomes a distraction from the content, it has failed.

The Loop And The Pause

The pause between loops is as important as the animation itself. Hold the final frame for 2 to 5 seconds before repeating. If the loop is invisible, meaning the animation ends at the exact same position it started, the pause may be unnecessary. The failure case is the logo animation that loops every 2 seconds with no pause. It creates a flashing effect that not only annoys but can trigger vestibular discomfort. WCAG 2.1, Success Criterion 2.3.1, limits flashing to no more than three times per second. A 2-second loop with a 0.5-second animation and a 1.5-second pause is right at the edge. The safe approach is to design the animation to play once and then stop, with the final frame being the static logo. If the client insists on a loop, set the loop duration to at least 6 seconds and respect the prefers-reduced-motion setting by disabling the loop entirely.

A Practical Rule Of Thumb

For the duration itself, there is a rule of thumb: the logo animation should be as long as it takes to say the company name in your head, plus one second. For a three-syllable name, that is about 2.5 seconds. For a longer name, 3 to 4 seconds. This is not a scientific measurement, but it prevents the most common mistake of making the animation too long. A 10-second logo animation is not a logo animation; it is a short film. Reject it unless it is a title sequence for a film studio, in which case the logo is the content, not a prefix. The one exception to the short-duration rule is when the logo animation includes sound, and the audio sting is itself 2 to 3 seconds long. In that case, match the visual duration to the audio duration. Export a single file with audio embedded, using the AAC-LC codec in an MP4 container for web or Opus in WebM.

How to Make a Logo Animation with a Transparent Background for Social Media

A transparent background is a non-negotiable requirement for a logo animation that will be overlaid on video, a photograph, or a coloured background. The format you choose determines whether the transparency survives the upload. MP4 with the H.264 codec does not support alpha channels, so any MP4 logo animation will have a solid background colour that must be keyed out in a video editor.

Formats That Keep Transparency

The correct formats for transparency are WebM with alpha, APNG, and Lottie. For social media, the platform determines what is accepted. X supports MP4 and GIF, but not WebM with alpha on upload, so a transparent logo there requires either a keyed MP4 or a GIF. LinkedIn supports MP4 and MOV, but the MOV must be H.264, which lacks alpha. Instagram and TikTok do not support transparency at all for video. The logo animation must be composited over the background in an editor before export.

The Production Workflow

Build the animation in After Effects. Export a ProRes 4444 MOV with alpha for the edit, then convert to the platform-specific format. For web use, a Lottie file is the best solution. It is vector-based, has complete alpha support, and is only 10 to 20 KB for a simple logo. For video platforms that do not accept Lottie, export a lossless WebM with alpha, then transcode to H.264 for upload, accepting the loss of transparency. The one-colour test applies here in reverse: if the logo animation is a solid shape with no texture, it can be flattened onto any background in the editor. If it is a line-art mark with antialiasing, the edges will show against a different background colour. Export a PNG sequence with alpha, composite over the target background, and then export the video. This is more work, but it is the only way to guarantee a clean result when the platform strips alpha channels.

The failure case is the designer who exports an MP4 with a white background because the client will put it on a white website. Then the client wants it on a dark header and the white box is obvious. Ask for the background colour before exporting, or export a Lottie for the website and an MP4 with a solid background that matches the primary use case. The alpha channel is a production requirement, not a nice-to-have. The format that supports it should be the default unless the platform forces otherwise.

Frequently Asked Questions about Logo Animation Basics

What is the best format for a logo animation on a website? The best format is SVG with CSS animation. It is a vector file that scales to any size, loads instantly, and can be styled or scripted. It is also the lightest option, typically under 20 KB, and it respects the user's reduced-motion preferences automatically if you use the prefers-reduced-motion media query.

How long should a logo animation last for a social media profile picture? For a profile picture, the animation should be no longer than 3 to 5 seconds, and it should resolve to the static logo as its final frame. Most social platforms do not autoplay profile picture animations, so the animation is usually a separate upload. A 2-second loop with a 3-second pause is the maximum you should consider for an animated avatar.

Can I use a GIF for a logo animation? You can, but you should not unless the platform requires it. GIF files are large, limited to 256 colours, and do not support audio or a modern codec. For a simple shape with flat colours, a GIF might be acceptable at a small size. For any logo with gradients, transparency, or fine detail, an MP4 or WebM will look better and load faster.

What is the difference between Lottie and SVG animation for a logo? Lottie is a JSON file format that renders vector animation natively in mobile and web apps. It is the output of After Effects via the Bodymovin plugin. SVG animation is code using CSS or JavaScript to animate the SVG markup directly. Lottie is better for complex animations with multiple layers and is easier to hand off to developers. SVG is better for simple, lightweight, and accessible animations that are part of the page content.

Does a logo animation need to be accessible? Yes. Under WCAG 2.2, animations that run longer than 5 seconds must have a pause or stop control, and any animation that flashes more than three times per second is prohibited. The prefers-reduced-motion media query is the primary tool for making a logo animation accessible. Always provide a static fallback for users who have reduced motion enabled.

What is the ideal file weight for a logo animation? The ideal file weight is under 100 KB for a Lottie file, under 50 KB for an SVG, and under 2 MB for an MP4 at 1080p for social media. The lighter the file, the faster it loads, and the less likely it is to be compressed further by the platform. If your file is heavier, simplify the animation, reduce the frame rate, or shorten the duration.

Can a logo animation be used as a favicon? Yes, but only if the final frame passes the favicon test at 32 by 32 pixels. Most favicon formats do not support animation well. The old .ico format had limited animation support, but modern sites use PNG or SVG favicons. An SVG favicon can be animated, but browsers like Chrome have reduced support for animated SVG favicons. The safest approach is to use a static PNG or SVG that is a frame of the animation.

A 10-second logo animation is not a logo animation; it is a short film. Reject it unless it is a title sequence for a film studio, in which case the logo is the content, not a prefix.

Logo Animation Principles Duration Limits and File Format Requirements