0.1.1 • Published 4 years ago
@gugadev/lottie v0.1.1
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.).