Using Lottie
Code
<div data-bodymovin-path="assets/lottie/b.json"
data-bodymovin-loop="true"
data-bodymovin-autoplay="true">
</div>
<script src="vendor/bodymovin/5.12.2.js"></script>
<script>
function applyLottie(page) {
elements = page.querySelectorAll('[data-bodymovin-path]')
elements.forEach(element => {
// check if element's already initialized
if (element.dataset.bodymovinInitialized) {
return
} else {
element.dataset.bodymovinInitialized = true
}
var animation = bodymovin.loadAnimation({
container: element,
renderer: 'svg',
loop: element.dataset.bodymovinLoop === 'true',
autoplay: element.dataset.bodymovinAutoplay === 'true',
path: element.dataset.bodymovinPath
})
})
}
applyLottie(document.body)
</script>
Demo
Last updated