Motion graphics are how a brand behaves once it moves — the animated logo, the social bumper, the way a button springs, the transition between two scenes. As more of brand life happens on video and in apps, “how the brand moves” becomes as much a part of identity as how it looks sitting still. This guide covers what to actually produce, the timing and easing principles that make motion feel branded, how to document motion in guidelines, and how to export and keep it accessible.
Motion is powerful and easy to overdo. The aim is movement that reinforces the brand and helps the user, not animation for its own sake.
What to produce: the core motion kit
Most brands need a focused set of motion assets rather than endless bespoke videos:
- Animated logo / sting — a short (often 1.5 to 3 second) reveal of the logo for the start or end of videos. The most reused motion asset you’ll own.
- Bumpers and end cards — branded open and close frames that top and tail any video so it’s recognisable in the first second.
- Lower thirds — name-and-title overlays for interviews and talking-head content, styled to the brand.
- Social motion templates — editable templates for the repeating formats you post: quote cards, promos, announcements, sized for the platforms you actually use.
- Transitions and UI motion — the consistent way elements enter, exit and change state in your app or website.
Build these as reusable templates wherever possible, so the team produces on-brand motion weekly without commissioning a fresh animation each time.
Easing and timing make motion feel branded
The personality of motion lives almost entirely in easing and timing. Linear motion — moving at a constant speed — looks robotic and is the giveaway of amateur work. Real things accelerate and decelerate, so use easing curves:
- Ease-out (fast then settling) for elements entering — it feels responsive and is the safe default for UI.
- Ease-in (slow then accelerating away) for elements leaving.
- Ease-in-out for elements moving between two on-screen positions.
Timing carries personality too. Snappy, short durations (around 150 to 250ms for UI) read efficient and confident; longer, softer eases read calm and premium; a slight overshoot or bounce reads playful. Pick durations and curves that match the brand and reuse them everywhere — that repetition is what makes motion feel like one brand rather than a pile of effects.
Define motion principles in your guidelines
A brand that takes motion seriously writes down how it moves, the same way it documents colour and type. A motion section in brand guidelines typically covers:
- Personality of movement — is the brand sharp and precise, smooth and fluid, or bouncy and energetic? State it, then derive everything from it.
- Standard easing curves and durations — the specific values to reuse, ideally with named tokens developers can implement.
- Entrance and exit behaviour — how things appear and disappear, consistently.
- Frame rate — typically 24fps for a filmic feel, 30fps for general video, or 60fps for ultra-smooth UI. Pick a default per context.
- Do and don’t examples — short clips showing on-brand versus off-brand motion.
Documented principles are what let a different editor or developer produce motion that matches months later. We treat this as part of the wider identity in our branding and design work, so the brand moves consistently across video, social and product.
File formats and export
The right export depends entirely on where the motion lives. Get this wrong and you ship huge files or broken playback:
- MP4 (H.264) — the universal choice for social video and web embeds. Small, compatible, but no transparency.
- GIF — only for very short, simple loops. It’s heavy and limited to 256 colours; reach for it sparingly, not for hero video.
- Lottie (JSON) — vector animation for web and app, exported via Bodymovin from After Effects. Tiny file size, infinitely scalable, recolourable in code — ideal for UI animations, loaders and animated icons.
- Transparent ProRes (4444) — high-quality video with an alpha channel, for compositing a logo sting or lower third over other footage.
- WebM (VP9, alpha) — transparency on the web where ProRes is too heavy, for overlay animations in the browser.
A practical rule: Lottie for in-product UI motion, MP4 for social, transparent ProRes or WebM when you need to lay motion over something else.
Keeping motion on-brand and accessible
Motion has a real accessibility dimension. Some people experience nausea or discomfort from large, fast or parallax movement. Respect the operating system’s reduced-motion setting: in CSS, honour prefers-reduced-motion by cutting or simplifying non-essential animation, and offer reduced variants of heavier effects. Avoid rapid flashing entirely — it’s both an accessibility hazard and rarely on-brand.
The harder discipline is restraint. Motion adds value when it guides attention, shows relationships (this panel came from that button), provides feedback (the form saved), or builds brand recognition (the sting). It becomes a gimmick when everything moves at once, animations are slow enough to make the interface feel sluggish, or movement competes with the content instead of supporting it. When in doubt, less and faster.
The Singapore social context
Motion earns its keep most on social, where Singapore audiences scroll fast across Instagram, TikTok and LinkedIn. A few practical notes: design for sound-off viewing with clear captions baked in, hook within the first second because that’s all the scroll gives you, and prioritise vertical and square formats for mobile feeds. A consistent branded bumper or sting is what makes your content recognisable in a crowded feed before anyone reads a word. You can see how brands come to life in motion across our work portfolio.
Frequently asked questions
Do we need an animated logo?
If you produce any video or run social, yes — it’s the single most reused motion asset and gives every clip an instant, recognisable open or close. If you genuinely never publish video, it’s lower priority, though a simple logo animation is inexpensive and tends to get used more than expected once you have it.
What’s Lottie and why does everyone mention it?
Lottie is a format for vector animations exported as JSON and played in web and app interfaces. It’s popular because files are tiny, scale to any size without blur, and can be recoloured or controlled in code. It’s ideal for loaders, animated icons and small UI motion — not for full-frame video, where MP4 is the right tool.
How do we stop motion looking amateur?
Two fixes cover most of it: never use linear easing — always accelerate and decelerate — and keep durations consistent and on the short side. Beyond that, restraint. Professional motion usually animates fewer things, more deliberately, with reused easing curves, rather than moving everything on screen at once.
Want your brand to move as well as it looks? Tell us what you’re making and we’ll help you define a motion system that’s on-brand everywhere.
