Lottie Animation в Taptop

Что такое Lottie и почему это удобно

Lottie — это формат анимации, созданный Airbnb, который позволяет воспроизводить анимации, экспортированные из After Effects (или более простых редакторов), прямо в браузере.

• Легкий — намного меньше, чем видео или GIF-файлы
• Поддерживает прозрачность и масштабируемость (на основе SVG)
• Идеально подходит для циклической или интерактивной анимации
• Идеален для UI-анимаций и мобайла

Как встроить Lottie в Taptop

Шаг 1 — Добавьте элемент Embed Code

1. Перетащите блок Embed на страницу
2. Установите высоту и ширину в соответствии с размером анимации (например, 300 × 300 пикселей или 100% ширины)

Размер встраиваемого блока определяет, как будет отображаться анимация. Если ваша анимация Lottie адаптивна, вы можете использовать ширину: 100%.

Шаг 2 — В элемент Embed Code вставьте следующий код:

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.4/lottie.min.js"></script>
<script>
  lottie.loadAnimation({
    container: document.getElementById('lottie-animation'), // Target container
    renderer: 'svg',             // Rendering method (svg recommended)
    loop: true,                  // Loop the animation
    autoplay: true,              // Start playing automatically
    path: 'https://site-95943.taptop.site/f/showreel-grid-mobile-remix.json' // Replace with your own JSON URL
  });
</script>

Что означает каждая строка

• container — Элемент, в который будет вставлена анимация. Здесь нам нужно указать ID элемента Embed Code
• renderer: 'svg' — определяет тип рендеринга; SVG обеспечивает широкую совместимость
• loop: true — обеспечивает бесконечный цикл
• autoplay: true — воспроизведение начинается сразу после загрузки
• путь — URL-адрес вашего файла анимации.json Lottie

Где взять ссылку в формате.json

Вы можете загрузить свой файл.json непосредственно в Раздел Assets в Taptop. После загрузки просто нажмите на файл и скопируйте прямой URL-адрес — затем вставьте его в поле пути.

Почему это удобно

• Lottie анимация не нагружают сайт
• Легко заменяйте или обновляйте анимацию
• Совместим со всеми современными браузерами
• Не требуются внешние плагины

Если вы хотите привнести в свой проект движение и интерактивность — рассмотрите Lottie.