Анимация в формате json на сайте не запускается

Question

Почему здесь не запускается анимация по нажатии на кнопку, ведь вроде бы весь код написан верно.

const animation = lottie.loadAnimation({
  container: document.getElementById('lottie-animation'), // контейнер для анимации
  renderer: 'svg',
  loop: true,
  path: 'data.json'
});

function Start() {
  animation.play()
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.4/lottie.min.js"></script>
<div id="lottie-animation"></div>
<button onclick='Start()'>Play</button>

Answer 1

Увидели забавную анимацию и решиле себе на сайт затянуть... Пользователь тут пробует запустить lottie анимацию. Она стартует только с локального или вирутуального сервера. Вот рабочий вариант старта анимации по нажатию на кнопку.

<button onclick='start()'>Play</button>
<div id="animation"></div>
<script>
    const animation = lottie.loadAnimation({
        container: document.getElementById('animation'),
        renderer: 'svg',
        loop: true,
        autoplay: false, // отключите автоматическое воспроизведение
        path: 'index.json' // путь к вашему JSON файлу
    });
    function start() {
        animation.play(); // Запуск анимации по нажатию на кнопку
    }
</script>

Это очень прожорливая вещь которую я вам не советую использовать для важных сайтов.

БЛОГ НА HUSL

Анимация в формате json на сайте не запускается

Ответы (1 шт):