Every few months someone asks which format they should use for product animation.

The honest answer is boring: it depends.

But it depends on a few very specific things. Once you know what they are, the choice is usually obvious.

The quick version

• If the animation needs to respond to the user (hover, scroll, state changes), pick Lottie.

• If it is basically video (a walkthrough, a hero demo), pick MP4.

• If it has to work in email or places that do not support embeds, pick GIF.

GIF

GIF is 40 years old and it shows.

It caps out at 256 colors, so gradients get ugly fast and fine detail turns into dithered noise. File sizes are also big for what you get. A few seconds of animation can easily hit 1MB+.

The one thing GIF still wins on is compatibility.

It works in email. It works in Slack. It works basically everywhere.

If you need an animation to show up somewhere that does not support anything else, GIF is your fallback.

For anything inside a modern product, it is usually the wrong choice in 2026.

MP4

MP4 is great at what it was built for: video.

If you are putting a product walkthrough on a marketing page, or a demo reel inside a modal, MP4 handles complex scenes beautifully and modern compression keeps file sizes reasonable.

What MP4 cannot do is interact.

It plays from A to B. It cannot pause because someone scrolled halfway. It cannot switch states on hover. It cannot loop a tiny section seamlessly without some work.

Mobile adds another wrinkle. Autoplay with sound is blocked across major mobile browsers. You can do muted autoplay, but it is still one more thing to handle.

Lottie

Lottie was built for the exact use case where GIF and MP4 fail: UI animation inside digital products.

Because it is vector-based JSON (not pixels), files tend to be small. It scales cleanly to any density, supports transparency, and can be controlled programmatically.

That last part is the real unlock:

• Play, pause, seek, reverse

• Trigger on events

• Switch states based on what the user is doing

The trade-off is effort.

You need After Effects (or a compatible tool) to create the animation, and you need a developer to implement a player. You cannot just drop a Lottie into an email client and call it done.

So… which one should you use?

If it is going inside your product (loading states, onboarding, empty states, micro-interactions), use Lottie. It is not close.

If it is for marketing (hero sections, walkthroughs, reels), use MP4. Mix in Lottie for small UI accents.

If it has to live in email, Slack previews, or anywhere that strips JavaScript, use GIF. Keep it short, keep it small, and accept the quality limits.

When someone comes to us unsure what they need, we ask one question:

Does the animation need to respond to anything?

If yes, Lottie.

If it just needs to play, MP4 or GIF depending on where it will live.