Skip to content
charmotion
Get started

Rive vs Lottie vs GIF vs Video: Which Animation Format Should You Ship?

Published · 10:57

Play video

Plays from YouTube in privacy-enhanced mode. Nothing loads from YouTube until you press play.

Rive, Lottie, GIF, WebM or MP4? This guide answers the 24 questions developers and designers ask most about animation formats: what Rive is and what it costs, how Rive and Lottie compare on size and speed, why GIF struggles on the web, how transparent video works in Safari and Chrome, and the video specs for Shorts, Reels and App Store previews.

Every character in this video was animated from a single image with Charmotion: 17 animations as a Rive file, transparent video, MP4 and GIF.

Watch on YouTube

Chapters

  1. 0:00Intro
  2. 0:27What is Rive?
  3. 0:50Is Rive free?
  4. 1:12What is a Rive state machine?
  5. 1:34Free Rive file inspector
  6. 1:57How Duolingo animates its characters
  7. 2:35Rive vs Lottie: the difference
  8. 3:01Which files are smaller?
  9. 3:25Is Rive faster than Lottie?
  10. 3:48Rive or Spline?
  11. 4:10Lottie or GIF?
  12. 4:37Why GIF is bad for web animation
  13. 5:01Real file sizes: one character, 17 animations
  14. 5:45Make a video behave like a GIF
  15. 6:03Transparent video on a website
  16. 6:28Can an MP4 be transparent?
  17. 6:53Does Safari support transparent WebM?
  18. 7:15Is my video really transparent?
  19. 7:48Why video won't autoplay on iPhone
  20. 8:10Best format for an animated logo
  21. 8:34Animated GIFs in Outlook signatures
  22. 8:59What is prefers-reduced-motion?
  23. 9:30How long can a YouTube Short be?
  24. 9:53Instagram Reels safe zones
  25. 10:16App Store app preview specs

Read more

See your own character move

Upload one image and get a free animated preview.

Free preview

More videos

All videos