Animations

GitHub | GIF / MP4 / JSON assets for animations.

GIF Brewery 3 is now free for converting video files to GIF

Comparison of Animation Delivery Options

Using the hands clap illustration as an example.

Bodymovin

• 😀 60 FPS rendering, looks nice!
• 😀 Resolution independent vector rendering
• 😀 No background included, so could use over gradients or images + no need to recreate assets for different color backgrounds
• 😀 Can manipulate animation, replay on demand, adjust playback speed, pauses between loops, etc
• ▶️ Animation data file is 12KB | 2KB gzipped
• ☹️ bodymovin.js must be loaded once on any page with a bodymovin animation 147KB | 39KB gzipped
• ☹️ ️Must initiate animation with javascript
  

  <script src="./bodymovin_light.min.js" type="text/javascript"></script>
  <script>
      bodymovin.loadAnimation({
          container: document.getElementById('lottie'),
          path: './animation-files/chat.json',
          renderer: 'svg',
      })
  </script>
  

Animated gif

• 😃 Easy to drop into page
• 😃 Can easily add to emails
• ️️▶️ Gif file is 56KB
• ️️️▶️ Rendered out at 2x so it doesn't look fuzzy on retina displays, then resized to original dimensions
• ☹️ No control of playback, just loops indefinitely
• ☹️ Largest file for lowest quality rendering
• ☹️ Lowest quality for framerate, color, and compression
• ☹️ No transparent background, will need to re-render for every background option

Video file (mp4)

• 😃 Both smaller and higher quality than gif file
• ️️▶️ Mp4 file is 23KB
• ️️▶️ Rendered out at 2x so it doesn't look fuzzy on retina displays, then resized to original dimensions
• ️️▶️ Playback control possible in javascript, but by default just loops indefinitely
• ️️▶️ Requires video tag:
  <video loop muted autoplay playsinline><source src="..." type="video/mp4"></video>
• ☹️ No transparent background, will need to render for every background option