Привязка к существующим элементам

Привязка анимаций к существующим DOM-элементам в mo.js строится вокруг концепции использования реальных узлов документа как источника координат, размеров и событийного контекста. В отличие от абстрактных сценических систем, где объекты существуют внутри собственной системы координат, здесь анимация напрямую наследует геометрию интерфейса.

Основной способ привязки начинается с передачи элемента через параметр el. Этот параметр принимает DOM-узел и используется как якорь для вычисления позиции, от которой будут строиться эффекты.

const button = document.querySelector('.btn');

const burst = new mojs.Burst({
  parent: button,
  radius: { 20: 80 },
  count: 10,
  children: {
    shape: 'circle',
    fill: 'red'
  }
});

В данном случае элемент выступает не только как источник координат, но и как контейнер, в который могут быть встроены визуальные эффекты через parent.

Использование parent и el: различие моделей привязки

Параметр el определяет опорную точку, относительно которой вычисляется трансформация. parent задаёт DOM-контейнер, в который добавляются создаваемые элементы анимации.

Ключевое различие:

  • el — источник позиции и размеров
  • parent — контейнер отрисовки анимации
const circle = new mojs.Shape({
  el: document.querySelector('.icon'),
  shape: 'circle',
  scale: { 0: 1 },
  duration: 600
});

Здесь анимация масштабирования происходит относительно центра элемента .icon, без создания отдельного контейнера.

Привязка через координаты bounding box

Внутренний механизм вычисления положения опирается на getBoundingClientRect(). Это позволяет синхронизировать анимацию с реальным положением элемента в потоке документа, включая трансформации layout.

Поведение особенно важно при:

  • скролле страницы
  • изменении размеров контейнера
  • использовании flex/grid layout

Анимация пересчитывает стартовую точку при инициализации, фиксируя координаты на момент создания экземпляра.

Burst-анимации от точки элемента

Механика “взрыва” часто используется как реакция на взаимодействие с UI. Привязка к элементу позволяет запускать частицы из центра DOM-узла.

const icon = document.querySelector('.icon');

const burst = new mojs.Burst({
  parent: icon,
  radius: { 0: 100 },
  count: 12,
  children: {
    shape: 'polygon',
    radius: 6,
    fill: 'yellow',
    angle: { 0: 360 }
  }
});

icon.addEventListener('click', () => {
  burst.replay();
});

Геометрический центр элемента используется как origin для всех дочерних частиц, что создаёт эффект естественного разлёта.

Анимация с учётом трансформаций элемента

При наличии CSS-трансформаций (scale, rotate, translate) поведение привязки зависит от режима вычисления координат. mo.js работает поверх DOM-слоя, поэтому визуальное смещение не всегда совпадает с физическим положением в документе.

Особенности:

  • transform не изменяет bounding box в реальном времени
  • позиция берётся до применения визуальных эффектов
  • анимация может выглядеть смещённой при сложных трансформациях

Привязка к событиям DOM-элементов

Чаще всего анимация синхронизируется с пользовательскими событиями: click, mouseenter, mousedown. DOM-элемент становится триггером запуска анимации.

const card = document.querySelector('.card');

const fade = new mojs.Html({
  el: card,
  opacity: { 0: 1 },
  duration: 300
});

card.addEventListener('mouseenter', () => {
  fade.replay();
});

Такой подход позволяет создавать реактивные интерфейсы, где анимация является прямым продолжением взаимодействия.

Использование нескольких привязанных элементов

Одна анимация может зависеть от нескольких DOM-узлов, если вычисление координат происходит динамически. В таких случаях используется пересоздание экземпляра или обновление параметров перед запуском.

function createBurst(target) {
  return new mojs.Burst({
    parent: target,
    radius: { 10: 60 },
    count: 8,
    children: {
      shape: 'circle',
      fill: 'blue'
    }
  });
}

document.querySelectorAll('.item').forEach(el => {
  const burst = createBurst(el);

  el.addEventListener('click', () => {
    burst.replay();
  });
});

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

Центровка и смещение относительно элемента

При привязке важную роль играет точка отсчёта: центр, верхний левый угол или пользовательское смещение. В mo.js центрирование выполняется автоматически, но может быть скорректировано через параметры трансформации.

Типовые сценарии:

  • центр элемента используется для burst-анимаций
  • верхний левый угол применяется для линейных перемещений
  • кастомные offsets задаются через x, y
const move = new mojs.Html({
  el: document.querySelector('.box'),
  x: { 0: 100 },
  y: { 0: 50 },
  duration: 500
});

Привязка к динамически создаваемым элементам

При работе с DOM, элементы могут появляться после инициализации скрипта. В таких случаях привязка выполняется лениво — после вставки элемента в дерево.

document.body.insertAdjacentHTML('beforeend', '<div class="dot"></div>');

const dot = document.querySelector('.dot');

const anim = new mojs.Html({
  el: dot,
  scale: { 0: 1 },
  duration: 400
});

Ключевое условие — наличие элемента в DOM на момент создания анимации.

Синхронизация с размерами элемента

Размер DOM-узла напрямую влияет на поведение радиальных эффектов. При использовании Burst радиус может масштабироваться относительно размеров элемента-источника.

Особенно важно учитывать:

  • inline-элементы без размеров
  • элементы с display: none
  • элементы с изменяющейся высотой (анимации layout)
const box = document.querySelector('.box');

const burst = new mojs.Burst({
  parent: box,
  radius: { 0: box.offsetWidth / 2 },
  count: 6
});

Делегирование привязки через контейнер

Иногда анимация привязывается не к конкретному элементу, а к родительскому контейнеру с вычислением позиции целевого узла через event delegation.

const container = document.querySelector('.list');

container.addEventListener('click', (e) => {
  const item = e.target.closest('.item');
  if (!item) return;

  const burst = new mojs.Burst({
    parent: item,
    radius: { 0: 70 },
    count: 5
  });

  burst.replay();
});

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

Привязка к псевдоэлементам через вычисляемую геометрию

Псевдоэлементы ::before и ::after не существуют в DOM, поэтому привязка выполняется к их родительскому узлу. Визуальная корреляция достигается за счёт CSS и совпадения размеров.

mo.js оперирует исключительно реальными DOM-узлами, поэтому псевдоэлементы требуют ручной синхронизации через стили.

Поведение при изменении layout во время анимации

Если во время выполнения анимации изменяется layout страницы, привязка может визуально “плавать”. Это связано с тем, что координаты фиксируются на старте анимации.

Типичные причины:

  • изменение размеров контейнера
  • появление/исчезновение элементов
  • динамическая загрузка контента

В таких сценариях требуется пересоздание анимации с обновлёнными координатами элемента.

Комбинирование нескольких уровней привязки

Сложные интерфейсы используют комбинированную модель:

  • элемент как origin
  • контейнер как canvas
  • события как триггеры
  • координаты как динамический слой
const el = document.querySelector('.avatar');

const timeline = new mojs.Timeline();

timeline.add(new mojs.Burst({
  parent: el,
  radius: { 0: 80 },
  count: 10
}));

el.addEventListener('click', () => timeline.replay());

Такая архитектура позволяет связывать несколько анимационных эффектов с одним DOM-узлом, сохраняя единый контроль над жизненным циклом анимации.

Оглавление