Motion design and logo animation guideline

Why ready-made animation does not work on all platforms

A designer creates a striking video for a brand presentation, exports it to mp4 — and six months later, they try to embed the same animation into a mobile app, a website loading screen, and stories. The result is almost always poor: the animation either desyncs, is too heavy, or simply fails to launch because the video format does not support a transparent background on a specific platform.

The root of the problem is not in the tools, but in the approach: the guideline describes one animation instead of a system of rules from which the team can assemble the required version themselves. Typical mistakes repeat from project to project:

• Only one duration is fixed without context of use
• Easing curve is not documented — the next designer substitutes linear, and the motion looks mechanical
• The final frame is not specified as a separate requirement, which causes the pause on the last frame to become a distorted half-logo
• There is no static version and the prefers-reduced-motion rule is not defined — part of the audience should not see motion at all
• There are no source files for different output formats, only a rendered video

How long should the animation be: breakdown by contexts

Duration is not an aesthetic choice, but a functional parameter. A micro-interaction in the interface cannot last three seconds: the user simply will not wait. And a splash screen with a brand greeting, on the contrary, will not be perceived by the viewer as meaningful appearance within 300 ms.

How to build motion so that it doesn't look mechanical

The most common technical mistake is linear easing. A logo that moves at a constant speed from start to finish looks like a macro job, not a living brand. The correct choice of curve begins with ease-out: cubic-bezier(0, 0, 0.2, 1) for basic cases or more expressive cubic-bezier(0.16, 1, 0.3, 1), when an effect of a 'soft landing' of an element into its place is needed.

Next, the rule 20–30% applies: the time of preparatory movement (anticipation) should be one-fifth to one-third of the main action. If the sign assembly takes 750 ms, the preparation is 150–220 ms before the start, a slight compression or shift before the expansion. Without this phase, the animation looks jerky, as if the element appeared from nothing.

If a logo consists of several parts — a sign, letters, additional elements — they should not start simultaneously. Stagger offset is used: each next level is launched with a shift of 2–4 frames, that is 35–70 ms at 60fps, and the whole cascade fits into 500–700 ms. It is also important to keep in mind the rule 60–70%: the peak, most readable logo reveal should occur not at the very end of the video, but around two-thirds of its length — for a three-second video this is 1,8–2,1 seconds. After the peak comes a short fade-out of movement, not a sharp stop frame.

Four modes in which an animated logo lives

Instead of one video, the guideline should describe four independent modes — each with its own duration boundaries and technical requirements, and they must not be confused.

Frame rate is also tied to purpose: 24fps is suitable for cinematic branded videos, 30fps is standard for corporate video, and 60fps only makes sense in narrow cases of interface animation — otherwise, the movement of a premium brand starts to look like a game render, not like business graphics.

Final frame and accessibility — not an option, but a mandatory part of the guideline

There is a simple test for animation quality: pause it at the very last frame. If what you see does not look like a regular static brand logo — the animation is done incorrectly, regardless of how beautiful it looks before this point. The final frame must be identical to the static version of the brand mark from the main brand book, because that is what remains on the screen when the motion ends and the user continues to look.

Separately and without compromise, the guideline must include a rule for prefers-reduced-motion. This is not an additional option for 'advanced' developers, but a W3C requirement that affects real people: without taking this parameter into account, users with vestibular disorders or motion sensitivity experience physical discomfort from the brand interface. The static version of the logo must exist not as a fallback 'if the animation did not load,' but as an equal element of the system that is automatically substituted when the device is set accordingly.

How to document the rules so the team doesn't have to run to the designer for every version

The guideline works only if the internal team can create the necessary animation independently, without constantly asking the brand author. For this, the document must describe not ready-made files, but the parameters of the system:

1. A table of modes (loader, intro, loop, transition) with duration, frame rate, and allowable deviations
2. Motion formulas: easing values in the form of cubic-bezier, rule for anticipation 20–30%, stagger offset between elements
3. The requirement for the final frame is a direct match with the reference static logo from the main brandbook
4. Section on accessibility with ready-made media query code for prefers-reduced-motion and indication of which static version is substituted
5. List of export formats: After Effects source, Lottie JSON for web, MP4 with transparent background for video, separate versions for light and dark background

Such a structure transforms the motion guideline from a beautiful demo reel into a working tool that is linked to the brand strategy: the numbers and curves in it are not arbitrary, but express the same character that is embedded in the static identity — restrained or energetic, fast or deliberate. If after reading the document, the interface designer, motion artist, and developer arrive at the same result without having to consult with the brand author — the guideline is made correctly. If each new screen requires individual coordination — the document exists only on paper, not in the product.