npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

puppeteer-lottie-copy

v1.1.1

Published

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

Downloads

14

Readme

puppeteer-lottie

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

NPM Build Status JavaScript Style Guide

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

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 options
    • opts.output string Path or pattern to store result
    • opts.animationData object? JSON exported animation data
    • opts.path string? Relative path to the JSON file containing animation data
    • opts.width number? Optional output width
    • opts.height number? Optional output height
    • opts.jpegQuality object JPEG quality for frames (does nothing if using png) (optional, default 90)
    • opts.quiet object Set to true to disable console output (optional, default false)
    • opts.deviceScaleFactor number Window device scale factor (optional, default 1)
    • opts.renderer string Which lottie-web renderer to use (optional, default 'svg')
    • opts.rendererSettings object? Optional lottie renderer settings
    • opts.puppeteerOptions object? Optional puppeteer launch settings
    • opts.ffmpegOptions object? Optional ffmpeg settings for crf, profileVideo and preset values
    • opts.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.inject.head string? Optionally injected into the document
      • opts.inject.style string? Optionally injected into a tag within the document
      • opts.inject.body string? Optionally injected into the document
    • 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

License

MIT © Travis Fischer

Support my OSS work by following me on twitter