JSFiddle - React, Tailwind, and code Playground
HTML
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.js"></script>
</head>
<body>
<button id="load">Load Animation</button>
<button id="destroy">Destroy Animation</button>
<div id="container"></div>
<script>
(function () {
let animationItem;
const loadButton = document.querySelector('#load');
const destroyButton = document.querySelector('#destroy');
const container = document.querySelector('#container');
function loadAnimation() {
animationItem = lottie.loadAnimation({
container,
loop: true,
autoplay: true,
renderer: 'svg',
animationData: {
"v": "5.5.7",
"fr": 30,
"ip": 0,
"op": 164,
"w": 1920,
"h": 1920,
"nm": "textElement_simpler",
"ddd": 0,
"assets": [],
"fonts": {
"list": [
{
"origin": 0,
"fPath": "",
"fClass": "",
"fFamily": "Arvo",
"fWeight": "",
"fStyle": "Regular",
"fName": "Arvo",
"ascent": 76.0094506833702
}
]
},
"layers": [
{
"ddd": 0,
"ind": 1,
"ty": 5,
...