JSFiddle - React, Tailwind, and code Playground

by Jon Fuller

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<div class="svg-animation"></div>
<script src="https://freshysites.com/jf-temp/lottie.min.js"></script>

CSS

.svg-animation {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
}

JavaScript

// Init animation on Home page
    if ($('.svg-animation').length) {
        lottie.loadAnimation({
            container: document.querySelector('.svg-animation'), // the dom element that will contain the animation
            renderer: 'svg',
            loop: true,
            autoplay: true,
            path: 'https://cors-anywhere.herokuapp.com/https://freshysites.com/jf-temp/data.json' // the path to the animation json
        });
    }