Demo here (mobile/desktop)

Lottie

This is a Web Component wrapper for lottie-web library from AirBnB. Currently exposes just a limited API from the original library (this can be change in the future according to needs).

Note: just SVG animation is supported for now.

Get started

First step is to install the library:

npm install @gugadev/lottie

Then, you need to bootstrap it according with the framework you are with.

If you uses only JavaScript, then:

<script type="module">
  import { applyPolyfills, defineCustomElements } from 'https://unpkg.com/@gugadev/lottie/loader';
  applyPolyfills().then(() => {
    defineCustomElements(window);
  });
</script>
<script nomodule src="https://unpkg.com/@gugadev/lottie/latest/dist/lottie.js"></script>

If you're using frameworks, please see Stencil documentation.

How to use

There are four attributes:

• data: the URL that points to the bodymovin JSON.
• infinite: makes a loop for the animation.
• autoplay: if the animation should start automatically.
• progressive: if the animation is too big/slow, consider render it progressively.
• aspectRatio: to change the aspect ratio of the SVG. See .

There are three methods exposed too:

• pause: pause the animation.
• resume: resume the animation.
• destroy: ditch the animation to create a new one.

Roadmap

• Expose the complete lottie's API.
• Expose lottie's custom events.
• Accept other rendering types (Canvas, etc.).