Lottie анимация в Tilda Publishing. Как использовать Lottie на сайте

05.04.2023

Введение

Lottie — это библиотека для создания анимаций, которая позволяет создавать векторные анимации и экспортировать их в формат JSON. Такая анимация имеет меньший размер файла и удобнее в использовании, чем обычные GIF-анимации. Lottie анимация в Tilda Publishing дает возможность создавать уникальный и интерактивный контент для вашего тильда сайта.

Как добавить Lottie анимацию в Tilda

Для использования Lottie анимации на сайте в Tilda Publishing, сначала нужно создать анимацию в формате JSON с помощью библиотеки Lottie. Это можно сделать с помощью Adobe After Effects или найти уже готовую анимацию на сайте LottieFiles. Затем нужно загрузить файл JSON в Tilda Publishing и добавить его на страницу сайта. Для этого можно использовать блок “HTML-код”, который можно найти в меню блоков Tilda. В этой статье мы подробно разберем способ с уже готовой анимацией.

Зарегистрируйтесь на сайте LottieFiles.
Раскройте вкладку «Discover» и выберите «Free Ready-to-use Animations».
Нажмите на понравившуюся анимацию левой кнопкой мыши.
В открывшемся окне нажмите на копку «Download» и «Upload to My Workspace».
Нажмите на кнопку «Save» чтобы перейти в окно редактирования анимации.
Нажмите на кнопку «Handof & Embed» и переведите тумблер в активное положение.
Сохраните куда-нибудь ссылку из пункта «Asset link».
Перейдите в Тильду и создайте zero block.
Добавьте html элемент и скопируйте в него следующий код:

<lottie-player id="lottie-auto-1" src="ссылка" style="width:100%; height:100%;"></lottie-player>

Вместо слова «ссылка» вставьте сохраненную ссылку на анимацию из LottieFiles.
Расположите html элемент там, где у вас должна быть лотти анимация.
Сохраните изменения и выйдите из зеро блока.
Добавьте блок «Т123».
Нажмите на кнопку «Контент» и скопируйте туда следующий скрипт:

<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',
  mode: "chain",
  actions: [
    {
    state: 'autoplay',
     type: "loop",
     transition: 'repeat',
    }
  ],
}); 
</script>

Опубликуйте страницу и получите результат.

Есть несколько вариантов воспроизведения Lottie анимации в Tilda: автоматическое воспроизведение (которое мы уже рассмотрели), при скролле, при наведении и при помощи курсора мыши. Ниже мы рассмотрим все оставшиеся варианты.

Lottie анимация в Tilda. Воспроизведение при скролле

Для того, чтобы настроить воспроизведение лотти анимации при скролле, выполните следующие шаги:

В html элементе зеро блока измените «auto» на «scroll».
В блок «Т123» скопируйте следующий скрипт:

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

Lottie анимация в Tilda. Воспроизведение при наведении

Для того, чтобы настроить воспроизведение лотти анимации при наведении, выполните следующие шаги:

В html элементе зеро блока измените «auto» на «hover».
В блок «Т123» скопируйте следующий скрипт:

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

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

Lottie анимация в Tilda. Воспроизведение при помощи курсора мыши

Для того, чтобы настроить воспроизведение лотти анимации при помощи курсора мыши, выполните следующие шаги:

В html элементе зеро блока измените «auto» на «position».
В блок «Т123» скопируйте следующий скрипт:

<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 анимации на сайте в Tilda Publishing

Lottie анимация имеет меньший размер файла, чем другие виды анимации, что делает ее легкой для загрузки на сайт и ускоряет время загрузки страницы. Она также позволяет создавать красивые и плавные анимации, которые улучшают пользовательский опыт на сайте. Кроме того, Lottie анимация поддерживается на большинстве устройств, включая мобильные устройства.

Заключение

Использование Lottie анимации на сайте в Tilda Publishing может значительно улучшить пользовательский опыт на сайте и создать уникальный контент. Для использования Lottie анимации на сайте в Tilda Publishing нужно создать анимацию в формате JSON с помощью библиотеки Lottie, загрузить ее на сайт и добавить на страницу с помощью блока “HTML-код”. Эта технология имеет много преимуществ, таких как меньший размер файла, плавность анимации и поддержка на большинстве устройств. В целом, Lottie анимация — это отличный способ создания интерактивного и красивого контента на сайте в Tilda Publishing.

Hover анимация элементов в Тильда.