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.).