Question on the injection of html content

[yarres]

Hi,
This package is very promising and useful, thanks!

I experimented a bit with injected html inside the animation, by using for example:

renderLottie({
      path: `${__dirname}/../../data/animation.json`,
      output: `${__dirname}/../../rendered/frame-%d.png`,
      height: 720,
      width: 1280,
      inject: {
        body: '<div id="title">A custom title</div>',
         style: `#title {
          color: rgb(230, 107, 0);
      }`,
      },
    });

But the injected title was not rendered on my animation.
It seems that only what is inside the div with id root is rendered, and not what is injected via inject.body.

What do you think about it?

Thanks!

[Travis Fischer]

This would definitely be pretty easy to change since we're directly selecting the target root element to take screenshots of.

The one area where this would make things more difficult is in the output width / height calculations since the size is no longer just dependent on the size of the animation.

If you change the puppeteer launch options to use headless: false, you'll be able to see the browser window and rendered HTML in its full glory during rendering which is really useful for debugging things like this.

At the end of the day, I think this type of functionality may be more appropriate for a different, more general purpose puppeteer rendering library like puppeteer-render-text that shares a lot of similarities with this project. I'd rather keep this project focused on rendering Lottie animations only and doing that as well as possible.

Thanks!!