1.0.4 • Published 2 years ago
@cortado-holding/animation v1.0.4
Animation
Custom element for rendering Lottie animations.
Installation
npm install @cortado-holding/animationUsage
Add the module to your HTML <head>:
<script
type="module"
src="/node_modules/@cortado-holding/animation/dist/animation/animation.esm.js"
></script>Or import the module in your JavaScript module:
import '@cortado-holding/animation/dist/animation/animation.esm'Pass an URL to a JSON file, containing the animation data:
<ctd-animation url="/path/to/animation.json"></ctd-animation>Pass a JSON string, containing the animation data:
<ctd-animation
data='{"v": "5.0.1","fr": 10,"ip": 0,"op": 20,"w": 320,"h": 320, ...}'
></ctd-animation>Optionally, set width and height of the animation:
<ctd-animation url="/path/to/animation.json" width="320px" height="240px"></ctd-animation>Or use CSS custom properties to control the animation dimensions responsively:
:root {
--ctd-animation-width: 320px;
--ctd-animation-height: 240px;
}
@media (min-width: 720px) {
:root {
--ctd-animation-width: 480px;
--ctd-animation-height: 360px;
}
}You can find an overview of all supported attributes in the component docs.
Control play state
Pass a name to the animation element & add some controls:
<ctd-animation name="my-animation" url="/path/to/animation.json"></ctd-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('ctd-animation')
// ...
})()Query selectors and call the element's methods:
;(async () => {
await customElements.whenDefined('ctd-animation')
const animation = document.querySelector('ctd-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()
}
})()