Custom element for rendering Lottie animations.
npm install @cgoern/flyAdd the module to your HTML <head>:
<script type="module" src="/node_modules/@cgoern/fly/dist/animation/animation.esm.js"></script>Or import the module in your JavaScript module:
import '@cgoern/fly/dist/animation/animation.esm'Pass an URL to a JSON file, containing the animation data:
<fly-animation url="/path/to/animation.json"></fly-animation>Pass a JSON string, containing the animation data:
<fly-animation
data='{"v": "5.0.1","fr": 10,"ip": 0,"op": 20,"w": 320,"h": 320, ...}'
></fly-animation>Optionally, set width and height of the animation:
<fly-animation url="/path/to/animation.json" width="320px" height="240px"></fly-animation>Or use CSS custom properties to control the animation dimensions responsively:
:root {
--fly-animation-width: 320px;
--fly-animation-height: 240px;
}
@media (min-width: 720px) {
:root {
--fly-animation-width: 480px;
--fly-animation-height: 360px;
}
}You can find an overview of all supported attributes in the component docs.
Pass a name to the animation element & add some controls:
<fly-animation name="my-animation" url="/path/to/animation.json"></fly-animation>
<button id="play">Play</button>
<button id="pause">Pause</button>
<button id="stop">Stop</button>Ensure the custom element is defined:
;(async () => {
await customElements.whenDefined('fly-animation')
// ...
})()Query selectors and call the element's methods:
;(async () => {
await customElements.whenDefined('fly-animation')
const animation = document.querySelector('fly-animation')
const play = document.querySelector('#play')
const pause = document.querySelector('#pause')
const stop = document.querySelector('#stop')
play.onclick = async () => {
await animation.play()
}
pause.onclick = async () => {
await animation.pause()
}
stop.onclick = async () => {
await animation.stop()
}
})()