Пороги срабатывания

В Motion One триггеры анимаций почти всегда завязаны на момент пересечения элемента с заданной точкой наблюдения. Этот момент определяется не событием клика или таймером, а величиной видимости и положением элемента в области просмотра. Внутри библиотеки это реализуется через концепцию порогов, основанную на механизмах, схожих с Intersection Observer.

Порог срабатывания — это числовое или диапазонное значение, описывающее долю пересечения элемента с областью видимости.

  • 0 — элемент только появился на краю области наблюдения
  • 0.5 — элемент виден наполовину
  • 1 — элемент полностью находится в зоне видимости

Эта логика позволяет привязать анимацию не ко времени, а к пространственному состоянию интерфейса.

Параметр amount в inView

В Motion One контроль порога чаще всего реализуется через параметр amount в функции inView.

import { inView, animate } from "motion";

inView(".card", (info) => {
  animate(info.target, { opacity: 1, y: 0 }, { duration: 0.6 });
}, {
  amount: 0.3
});

Значение amount определяет минимальную долю видимости элемента, при которой происходит запуск анимации.

Поведение значений amount

  • amount: 0 — срабатывание при появлении хотя бы одного пикселя элемента
  • amount: 0.25 — четверть элемента должна быть видима
  • amount: 0.5 — половина элемента в области просмотра
  • amount: 1 — полное отображение элемента

Выбор значения напрямую влияет на ощущение «плавности» интерфейса. Малые значения создают ранний запуск анимаций, большие — задерживают их до полного раскрытия блока.

Порог как диапазон

В современных сценариях одного значения часто недостаточно. Motion One поддерживает поведение, при котором анимация может зависеть от диапазона видимости.

inView(".item", (info) => {
  animate(info.target, { scale: 1 });
}, {
  amount: [0.2, 0.8]
});

Такой подход задаёт два состояния:

  • начало реакции при 20% видимости
  • завершение триггера при 80%

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

Порог и повторные срабатывания

Одним из ключевых аспектов является поведение при выходе и повторном входе элемента в область видимости.

По умолчанию:

  • при входе за порог анимация запускается
  • при выходе за порог состояние может сбрасываться или фиксироваться
inView(".box", (info) => {
  animate(info.target, { opacity: 1 });
}, {
  amount: 0.4,
  once: false
});

Параметр once определяет, будет ли порог срабатывать повторно:

  • once: true — только первое пересечение
  • once: false — каждый повторный вход снова активирует триггер

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

Геометрия порога и viewport

Порог срабатывания всегда вычисляется относительно контейнера наблюдения. В типичном случае это viewport браузера, но Motion One позволяет задавать кастомные контейнеры.

inView(".panel", callback, {
  root: document.querySelector(".scroll-container"),
  amount: 0.6
});

В этом случае 60% видимости считается относительно области .scroll-container, а не окна браузера.

Такой подход меняет геометрию триггеров:

  • в скролл-контейнерах порог становится локальным
  • в глобальном viewport — глобальным

Связь порога и scroll-based анимаций

В @motionone/scroll порог срабатывания заменяется непрерывной моделью прогресса.

import { scroll, animate } from "motion";

scroll(
  animate(".progress-bar", { scaleX: [0, 1] })
);

Здесь вместо дискретного порога используется непрерывная шкала от 0 до 1, где:

  • 0 соответствует началу области прокрутки
  • 1 соответствует её завершению

Однако даже в этом случае концепция порога сохраняется как границы интервала:

scroll(
  (progress) => console.log(progress),
  {
    target: document.querySelector(".section"),
    offset: ["start end", "end start"]
  }
);

offset задаёт зоны, которые фактически заменяют пороговые точки:

  • первая граница — момент входа в область
  • вторая граница — момент выхода

Между ними формируется активная зона прогресса.

Порог как инструмент синхронизации анимаций

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

inView(".title", ({ target }) => {
  animate(target, { opacity: 1, y: 0 }, { delay: 0 });
}, { amount: 0.2 });

inView(".text", ({ target }) => {
  animate(target, { opacity: 1, y: 0 }, { delay: 0.1 });
}, { amount: 0.4 });

inView(".image", ({ target }) => {
  animate(target, { opacity: 1, scale: 1 });
}, { amount: 0.7 });

Разные пороги создают эффект последовательного раскрытия интерфейса при прокрутке.

Адаптивность порогов

Порог не является статичной величиной. Он может динамически подстраиваться под:

  • высоту экрана
  • плотность контента
  • скорость прокрутки
  • размеры элемента

В сложных интерфейсах пороги часто рассчитываются программно:

const height = window.innerHeight;

const dynamicAmount = height > 800 ? 0.5 : 0.3;

inView(".block", callback, {
  amount: dynamicAmount
});

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

Порог и пользовательское восприятие движения

Изменение порога влияет не только на технический момент запуска, но и на восприятие интерфейса:

  • низкий порог создаёт ощущение «отзывчивого» интерфейса
  • высокий порог добавляет задержку и «вес» элементам
  • диапазонные пороги формируют эффект постепенного раскрытия

В Motion One порог выступает как связующее звено между геометрией страницы и временной моделью анимации, позволяя переводить положение элементов в управляемое поведение анимации без дополнительной логики синхронизации

Оглавление