Lottie Animation в Taptop

Дата
July 24, 2025
Тема
Разработка

В визуальном редакторе Taptop пока нет встроенного виджета для Lottie-анимаций. Но это не проблема — любую Lottie-анимацию можно легко вставить вручную всего за пару кликов. Ниже — подробный гайд.

Что такое 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.
Автор:
Александр Гудаев —
Jul 2025

Прочие статьи