Today I learned about Lottie animations and how to use them

LottieLab

LottieLab is a tool that allows you to create and edit Lottie animations. It's a bit more user-friendly than the official Lottie website, and it's free to use.

Watermark issue with LottieLab

While LottieLab is a great tool, the export includes an ugly watermark, making the tool quite useless on the free plan. I've found that you can remove the watermark by using www.tinylottie.studio.

The watermark is probably encoded somewhere in the JSON file, but I was too lazy to find it myself.

Lottie scaling issues

When using Lottie animations, I've had issues making an image "cover" style implementation. This was coming from the SVG renderer of Lottie. I've found that you can override the "preserveAspectRatio" SVG attribute to have a “cover” behavior for Lottie animations.

<Lottie
  :animation-data="workingLottie"
  :no-margin="true"
  class="h-full rounded-2xl max-h-[600px]"
  renderer="svg"
  :renderer-settings="{
    preserveAspectRatio: 'xMidYMid slice',
  }"
/>