Home

Awesome

puppeteer-lottie

Renders Lottie animations via Puppeteer to image, GIF or MP4.

NPM Build Status JavaScript Style Guide

<p align="center"> <img width="100%" alt="Logo" src="https://raw.githubusercontent.com/transitive-bullshit/puppeteer-lottie/master/media/logo.gif"> </p>

This module is also available as a CLI.

Install

npm install --save puppeteer-lottie

If you want to generate GIFs, you must also install gifski. On macOS, you can run:

brew install gifski

If you want to generate MP4s, you must also install ffmpeg. On macOS, you can run:

brew install ffmpeg

Usage

const renderLottie = require('puppeteer-lottie')

// Create an MP4 from a lottie animation
await renderLottie({
  path: 'fixtures/bodymovin.json',
  output: 'example.mp4'
})

// Create a GIF with width 640px from a lottie animation
await renderLottie({
  path: 'fixtures/bodymovin.json',
  output: 'example.gif',
  width: 640
})

// Render each frame of the animation as PNG images with height 128px
await renderLottie({
  path: 'fixtures/bodymovin.json',
  output: 'frame-%d.png', // sprintf format
  height: 128
})

// Render the first frame of the animation as a JPEG image
await renderLottie({
  path: 'fixtures/bodymovin.json',
  output: 'preview.jpg'
})

Output Size

If you don't pass width or height, the animation's intrinsic size will be used, and if that doesn't exist it will use 640x480.

If you pass width or height, the other dimension will be inferred by maintaining the original animation's aspect ratio.

If both width and height are passed, the output will have those dimensions, but there will be extra whitespace (or transparency if rendering PNGs) due to lottie-web's default rendererSettings.preserveAspectRatio of xMidyMid meet (docs and demo).

For mp4 outputs, the height may be different by a pixel due to the x264 encoder requiring even heights.

API

<!-- Generated by documentation.js. Update this documentation by updating the source code. -->

renderLottie

Renders the given Lottie animation via Puppeteer.

You must pass either path or animationData to specify the Lottie animation.

output must be one of the following:

Type: function (opts): Promise

Compatibility

All lottie-web features should be fully supported by the svg, canvas, and html renderers.

This includes all of the animations on lottiefiles.com! 🔥

Also see Lottie's full list of supported features.

Related

License

MIT © Travis Fischer

Support my OSS work by <a href="https://twitter.com/transitive_bs">following me on twitter <img src="https://storage.googleapis.com/saasify-assets/twitter-logo.svg" alt="twitter" height="24px" align="center"></a>