What are your opinions regarding(about) animated logos?

Hi everyone,

What are your opinions regarding(about) animated logos?

Also, how do you think they will affect the brand(improve or weaken it)?

On the other hand, what type of animation do you think will be most popular? (video, Javascript, CSS)

One last point that I also wanted to add to this discussion is how can we make sure that our animated logo will run on all clients(phone, tablet, pc, tv, VR) very fast?

Thanks in advance to all the participants to this discussion.

Comments

[Michiel Hendriks]

I dislike all animations which add no function.
Smoothing transition is not a function.

I have no issues with an animation on something I am going to interact with, unless it slows down the interaction. So if I have to wait for the animation to finish, it's an obstruction. If the animation is not on something I'm interacting with, it's a distraction.

So in case of logos. They can animate when I hover/focus them. They can animate in about screens. They can animated during loading screens. But that's it.

[wolfiton]

Thanks, @michielhendriks for sharing your opinion, I also agree that micro-interactions with the logos are ok but not timeline animation that will make me wait before I can see the content or use the menu, for example to go to the desired page.

[Peter Hallander]

I think the key distinction is whether the animation serves a perceptual purpose or is just decoration.

For logo grids specifically — the kind of 'trusted by' or 'partners' sections you see on marketing sites — I've found that CSS filter: grayscale(1) with reduced opacity as the default state, transitioning to full color on hover, is actually functional rather than decorative. The grayscale default reduces visual noise when multiple logos compete for attention, while the color-on-hover creates a natural focal point without movement that could distract.

Best part: it's entirely CSS, no JavaScript, so it runs on everything (phone, tablet, TV, VR) and doesn't affect performance. The transition only involves opacity and filter, which are composited-layer properties — the browser never triggers layout or paint, just compositor passes.

For the cross-client performance question: stick to opacity, transform, and filter for animations. These three are the only CSS properties that run on the GPU compositor without causing a repaint. Anything that changes width, height, margin, color (non-filter) or background causes layout and/or paint — that's where you lose cross-device performance.

I built a Shopify app (Eye Catching on the Shopify App Store) that does exactly the CSS grayscale logo grid pattern with zero JavaScript, and it works identically across every browser and device we've tested.