lottie-puppeteer-fikuri

    3.1.2 • Public • Published

    puppeteer-lottie

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

    NPM Build Status JavaScript Style Guide

    Logo

    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 <style> 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 twitter

    Install

    npm i lottie-puppeteer-fikuri

    DownloadsWeekly Downloads

    44

    Version

    3.1.2

    License

    MIT

    Unpacked Size

    6.91 MB

    Total Files

    21

    Last publish

    Collaborators

    • fikri2992