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

lottie-node

v2.0.0

Published

Export lottie animations in node.js

Downloads

159

Readme

Important

puppeteer-lottie is doing the exact same thing as lottie-node, except via pupeteer (Chrome headless) instead of Node-canvas. This is slower, but fully compatible with lottie-web. It also has a neater API for rendering to video which you can use without knowledge of FFMPEG. The author overall provided a lot more work than I did for this library (~50 lines of code) and puppeteer-lottie should be a better option for almost everyone than lottie-node.

lottie-node

lottie-node is an API for runnig Lottie with the canvas renderer in Node.js, with the help of node-canvas and jsdom. This is intended for rendering Lottie animations to images or video. Using Node for rendering is advantageous over something like PhantomJS, since it's faster and allows you to export images with opacity. It doesn't have to record in real-time, and you won't have a problem with frame-skipping.

Installation

Install lottie-node and the peer-dependencies:

npm i canvas jsdom lottie-web lottie-node or yarn add canvas jsdom lottie-web lottie-node

Node-Canvas will most likely download a pre-built binary release for your cpu architecture rather than building it. If this isn't the case for you, you should install the libraries needed for the build.

If you want to render to video you also need ffmpeg. See Rendering to video

Usage

const lottieNode = require("lottie-node");

or

import lottieNode from "lottie-node";

If you need to specify the path to Lottie (if you have altered it for example) you can do it this way:

const lottieNode = require("lottie-node").factory("/path/to/lottie.js");

lottieNode (as created above) is a similar to lottie-web's loadAnimation, but the arguments are simplified since most of the Lottie options aren't relevant for rendering on the server.

It takes three arguments:

  • data: Same as lottie-web. Can also be a path to the json file
  • rendererSettings: See wiki. You can also pass the canvas directly instead of this argument. This is recommended unless you want to set preserveAspectRatio)
  • options: Any other options you want to pass to Lottie's loadAnimation(). Apart from assetsPath, most of these doesn't make sense for rendering animations on the server.

To render to a file, call goToAndStop() on the animation object. This renders a frame which is ready on the next "tick". use canvas.toBuffer(). Save the buffer directly to a file or piped them to ffmpeg to create a video (see Examples).

Examples

The examples render an animation from lottie-react-native to PNG or a full video. It's a good place to start.

Make sure you have ffmpeg (see Rendering to video below). Then run the examples in node:

cd examples
yarn # (or 'npm i')
node render-png.js
node render-mp4.js # This takes a little while (~10s on my laptop)

Rendering to video

If you want to render to video you need ffmpeg. Use a package manager or the official compilation guide for how to compile it on your platform. Package managers tends to ship older versions and can't be customized, but they are significantly easier to install.

How it works

Lottie wasn't written to support rendering in Node.js. Node-canvas and jsdom has some quirks when used together, and for some reason Lottie skipped frames for some animations when I tried running scripts the recommended jsdom way. Because of these challenges, while writing lottie-node I had to resort to some hacky methods that are generally discouraged. Rather than importing lottie-web as a module, it's loaded as a string, patched to work server-side, and then run using eval.

This type of solution is risky and can break with the upgrade of any of the peer dependencies, but at least the module is isolated and doesn't add dom-shims to the global scope. The examples have their own package.json and yarn lockfile, so in case the peer-dependencies updates and breaks lottie-node, they should still work.

Lottie's HTML renderer cannot be supported using jsdom. The SVG renderer may be possible to support by converting SVG to canvas. See issue 7 if you want to help out (I'm not going to add this).

Caveats and known issues

  • #8 lottie-node is not working with some json files although they work in lottie-web

Alternatives

puppeteer-lottie (I haven't tried it, but since it doesn't use node-canvas it doesn't have the same issues as lottie-node and supports SVG.