Как сделать:
<div id="svgContainer" data-animation-large="https://assets7.lottiefiles.com/packages/lf20_lhyy1vjd.json" data-animation-small="https://assets2.lottiefiles.com/packages/lf20_rw9zrtno.json"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.6/lottie.min.js"></script>
<style>.flex{display:flex!important;}.flex-container{display:flex!important;justify-content:center;align-items:center;height:100%;} #svgContainer{width: 100%;height: auto;}</style>
<script>
document.addEventListener("DOMContentLoaded",function() {
let svgContainer = document.getElementById('svgContainer');
let displayStatus;
let animData;
let animItem;
if (typeof InstallTrigger !== 'undefined') {
svgContainer.closest('.tn-atom__sticky-wrapper').classList.add('flex');
}
svgContainer.closest('.tn-atom__html').classList.add('flex-container');
if (window.matchMedia("(min-width: 900px)").matches) {
displayStatus = svgContainer.getAttribute('data-animation-large');
let animData = {
wrapper: svgContainer,
animType: 'svg',
loop: true,
autoplay: true,
path: displayStatus
}
animItem = bodymovin.loadAnimation(animData);
animItem.addEventListener('DOMLoaded', function(e) {
animItem.playSegments([[0,168],[140,213]], true);
});
} else {
displayStatus = svgContainer.getAttribute('data-animation-small');
animData = {
wrapper: svgContainer,
animType: 'svg',
loop: true,
autoplay: true,
path: displayStatus
}
animItem = bodymovin.loadAnimation(animData);
animItem.addEventListener('DOMLoaded', function(e) {
animItem.playSegments([[0,135],[134,213]], true);
});
}
});
</script>