Awesome
puppeteer-lottie
<p align="center"> <img width="100%" alt="Logo" src="https://raw.githubusercontent.com/transitive-bullshit/puppeteer-lottie/master/media/logo.gif"> </p>Renders Lottie animations via Puppeteer to image, GIF or MP4.
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:
- An image to capture the first frame only (png or jpg)
- An image pattern (eg. sprintf format 'frame-%d.png' or 'frame-%012d.jpg')
- An mp4 video file (requires FFmpeg to be installed)
- A GIF file (requires Gifski to be installed)
Type: function (opts): Promise
opts
object Configuration optionsopts.output
string Path or pattern to store resultopts.animationData
object? JSON exported animation dataopts.path
string? Relative path to the JSON file containing animation dataopts.width
number? Optional output widthopts.height
number? Optional output heightopts.jpegQuality
object JPEG quality for frames (does nothing if using png) (optional, default90
)opts.quiet
object Set to true to disable console output (optional, defaultfalse
)opts.deviceScaleFactor
number Window device scale factor (optional, default1
)opts.renderer
string Which lottie-web renderer to use (optional, default'svg'
)opts.rendererSettings
object? Optional lottie renderer settingsopts.puppeteerOptions
object? Optional puppeteer launch settingsopts.ffmpegOptions
object? Optional ffmpeg settings for crf, profileVideo and preset valuesopts.gifskiOptions
object? Optional gifski settings (only for GIF outputs)opts.style
object Optional JS CSS styles to apply to the animation container (optional, default{}
)opts.inject
object Optionally injects arbitrary string content into the head, style, or body elements. (optional, default{}
)opts.browser
object? Optional puppeteer instance to reuse
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
- puppeteer-lottie-cli - CLI for this module.
- puppeteer - Headless Chrome Node API.
- awesome-puppeteer - Curated list of awesome puppeteer resources.
- lottie - Render After Effects animations natively on Web, Android and iOS, and React Native.
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>