Lottie анимация в Тильде

В зеро-блоке создаем html элемент и туда добавляем код <lottie-player id="lottie-auto-1" src="ссылка" style="width:100%; height:100%;"></lottie-player>, в котором вместо слова ссылка вставляем ссылку на свой json-файл
Создаем HTML-блок T123 и туда копируем весь код ниже



<!--https://dsgnmax.ru/lottie-animation-->

<script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>
<script src="https://unpkg.com/@lottiefiles/lottie-player@0.4.0/dist/lottie-player.js"></script>

<script>
// Автоматическое проигрывание
LottieInteractivity.create({
  player: '#lottie-auto-1', //ID lottie-player в зеро-блоке и тут должны совпадать
  mode: "chain",
  actions: [
    {
    state: 'autoplay',
     type: "loop",
     transition: 'repeat',
    }
  ],
}); 
</script>

Проигрывание по скроллу

Инструкция

В зеро-блоке создаем html элемент и туда добавляем код <lottie-player id="lottie-scroll-1" src="ссылка" style="width:100%; height:100%;"></lottie-player>, в котором вместо слова ссылка вставляем ссылку на свой json-файл
Создаем HTML-блок T123 и туда копируем весь код ниже,



<!--https://dsgnmax.ru/lottie-animation-->

<script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>
<script src="https://unpkg.com/@lottiefiles/lottie-player@0.4.0/dist/lottie-player.js"></script>

<script>
//Анимация по сроллу
LottieInteractivity.create({
  mode: 'scroll',
  player: '#lottie-scroll-1', //ID lottie-player в зеро-блоке и тут должны совпадать
  actions: [
    {
        visibility:[0, 1.0],
        type: "seek",
        frames: [0, 300],
    },
    ]
});

//Анимация по сроллу по сложнее
// LottieInteractivity.create({
//   mode: 'scroll',
//   player: '#lottie-scroll-1', //ID lottie-player в зеро-блоке и тут должны совпадать
//   actions: [
//     {
//       visibility: [0, 0.2], // отступ от низа экрана, когда анимация на паузе
//       type: "stop", //Анимация на паузе
//       frames: [0]  //Количество кадров на паузе
//     },
//     {
//       visibility: [0.2, 0.6], 
//       type: "seek", //Анимация проигрывается по скролу
//       frames: [0, 60] // С какого по какой кадр будет проигрываться анимация
//     }, 
//     {
//         visibility:[0.6,1.0],  
//         type: "loop", //Анимация зациклена и проигрывает автоматически
//         frames: [60, 100]
//     }
//   ],
// });
</script>

Проигрывание по наведению

Инструкция

В зеро-блоке создаем html элемент и туда добавляем код <lottie-player id="lottie-hover-1" src="ссылка" style="width:100%; height:100%;"></lottie-player>, в котором вместо слова ссылка вставляем ссылку на свой json-файл
Создаем HTML-блок T123 и туда копируем весь код ниже



<!--https://dsgnmax.ru/lottie-animation-->

<script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>
<script src="https://unpkg.com/@lottiefiles/lottie-player@0.4.0/dist/lottie-player.js"></script>

<script>
// Анимация по наведению
LottieInteractivity.create({
  player: '#lottie-hover-1', //ID lottie-player в зеро-блоке и тут должны совпадать
  mode: "cursor",
  actions: [
    {
      type: "hover",
      forceFlag:false //Если указать значение true, то анимация будет воспроизводится сначала при каждом наведении
    }
  ],
}); 

//  type: "pauseHold" — Проигрывание анимации при наведении, если убарть курсор, то анимацйия становится на паузу
//  type: "hold" — Проигрывание анимации при наведении, реверс если убрать курсор
</script>

Проигрывание по клику

Инструкция

В зеро-блоке создаем html элемент и туда добавляем код <lottie-player id="lottie-click-1" src="ссылка" style="width:100%; height:100%;"></lottie-player>, в котором вместо слова ссылка вставляем ссылку на свой json-файл
Создаем HTML-блок T123 и туда копируем весь код ниже,



<!--https://dsgnmax.ru/lottie-animation-->

<script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>
<script src="https://unpkg.com/@lottiefiles/lottie-player@0.4.0/dist/lottie-player.js"></script>

<script>
//Анимация по клику
LottieInteractivity.create({
  player: '#lottie-click-1', //ID lottie-player в зеро-блоке и тут должны совпадать
  mode: "cursor",
  actions: [
    {
      type: "click",
      forceFlag:false //Если указать значение true, то анимация будет воспроизводится сначала при каждом клике
    }
  ],
}); 

//  type: "toggle" — Анимация реверс по клику
</script>

Проигрывание по позиции курсора

Инструкция

В зеро-блоке создаем html элемент и туда добавляем код <lottie-player id="lottie-position-1" src="ссылка" style="width:100%; height:100%;"></lottie-player>, в котором вместо слова ссылка вставляем ссылку на свой json-файл
Создаем HTML-блок T123 и туда копируем весь код ниже



<!--https://dsgnmax.ru/lottie-animation-->

<script src="https://unpkg.com/@lottiefiles/lottie-interactivity@latest/dist/lottie-interactivity.min.js"></script>
<script src="https://unpkg.com/@lottiefiles/lottie-player@0.4.0/dist/lottie-player.js"></script>

<script>
//Анимация по позиции курсора
LottieInteractivity.create({
  player: '#lottie-position-1', //ID lottie-player в зеро-блоке и тут должны совпадать
  mode:"cursor",
    actions: [
        {
            position: { x: [0, 1], y: [-1, 2] },
            type: "seek",
            frames: [0, 300]
        }
    ]
});

</script>

Документация по Lottie-анимации

Маркет бесплатных Lottie-анимаций

Web-плеер для Lottie