Lottie Animation Player for MODX

lottiePlayer.php

<?php
$modx->regClientStartupScript('https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.10.2/lottie.min.js');

$background = $modx->getOption('background', $scriptProperties, 'transparent');
$speed = $modx->getOption('speed', $scriptProperties, 1);
$width = $modx->getOption('width', $scriptProperties, '100%');
$height = $modx->getOption('height', $scriptProperties, '100%');
$loop = $modx->getOption('loop', $scriptProperties, 0);
$autoplay = $modx->getOption('autoplay', $scriptProperties, 1);
$json = $modx->getOption('lottieJSON', $scriptProperties, '');
$id = $modx->getOption('id', $scriptProperties, 'animation');

$container = '<lottie id="' . $id  . '"></lottie>';

$script  = '<script>';
$script .= 'lottie.loadAnimation({';
$script .= '  container: document.getElementById("' . $id . '"),';
$script .= '  path: "' . $json . '",';
$script .= '  renderer: "svg",';
$script .= '  loop: true,';
$script .= '  autoplay: true,';
$script .= '});';
$script .= '</script>';

$style  = '<style>';
$style .= '#' . $id . '{';
$style .= '  margin: 0 auto;';
$style .= '  width: ' . $width . ';';
$style .= '  height: ' . $height . ';';
$style .= '  display: inline-block;';
$style .= '  background: transparent;';
$style .= '}';
$style .= '</style>';


return $container . $script . $style;