Параметры анимации

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

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

  • типа анимации
  • длительности
  • задержки
  • поведения при входе и выходе
  • интеграции с кастомными CSS-анимациями

Параметр animation

Определяет тип анимации, применяемой к тултипу. Значение — строка, соответствующая имени CSS-анимации.

tippy('.btn', {
  content: 'Подсказка',
  animation: 'scale',
});

Стандартные значения:

  • fade — плавное появление (по умолчанию)
  • scale — масштабирование с прозрачностью
  • shift-away — сдвиг с уменьшением
  • shift-toward — сдвиг навстречу
  • perspective — эффект перспективы

При использовании темы (theme) визуальный результат может изменяться, так как стили анимации зависят от CSS.

Отключение анимации:

tippy('.btn', {
  animation: false,
});

Параметр duration

Задает длительность анимации в миллисекундах. Может быть:

  • одним числом — применяется и к появлению, и к исчезновению
  • массивом из двух значений — отдельно для show и hide
tippy('.btn', {
  duration: 500,
});

Раздельная настройка:

tippy('.btn', {
  duration: [300, 1000], // появление — 300мс, исчезновение — 1000мс
});

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

  • слишком короткие значения делают анимацию резкой
  • слишком длинные — ухудшают UX
  • оптимальный диапазон: 150–400 мс для появления

Параметр delay

Контролирует задержку перед началом анимации.

tippy('.btn', {
  delay: 200,
});

Раздельная настройка:

tippy('.btn', {
  delay: [100, 300], // задержка перед показом и скрытием
});

Типичные сценарии:

  • уменьшение случайных всплытий при быстром наведении
  • создание “инерции” интерфейса
  • согласование с другими анимациями страницы

Параметр inertia

Добавляет эффект “инерции” при появлении тултипа. Это визуально делает движение более естественным за счёт изменения кривой ускорения.

tippy('.btn', {
  inertia: true,
});

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

  • работает только с определёнными анимациями (scale, shift-*)
  • зависит от CSS transition-timing-function
  • требует подключения соответствующих стилей

Параметр moveTransition

Отвечает за анимацию перемещения тултипа при изменении позиции (например, при прокрутке или изменении размеров окна).

tippy('.btn', {
  moveTransition: 'transform 0.2s ease-out',
});

Без этого параметра тултип “прыгает” в новую позицию. С ним — плавно перемещается.

CSS и кастомные анимации

Tippy.js активно использует CSS, поэтому любые анимации можно переопределить или создать собственные.

Пример кастомной анимации:

.tippy-box[data-animation='custom-fade'] {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.tippy-box[data-state='visible'][data-animation='custom-fade'] {
  opacity: 1;
  transform: translateY(0);
}

Подключение:

tippy('.btn', {
  animation: 'custom-fade',
});

Связь с состояниями (data-state)

Tippy.js управляет состоянием тултипа через атрибуты:

  • data-state="hidden"
  • data-state="visible"

Это позволяет точно контролировать фазы анимации через CSS.

Пример:

.tippy-box[data-state='hidden'] {
  opacity: 0;
}

.tippy-box[data-state='visible'] {
  opacity: 1;
}

Timing Functions и плавность

Качество анимации сильно зависит от функции сглаживания (easing):

  • ease — стандартное плавное движение
  • ease-in — ускорение в начале
  • ease-out — замедление в конце
  • cubic-bezier(...) — кастомная кривая

Пример:

transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);

Такие кривые часто используются для создания “живого” интерфейса.

Параметр hideOnClick и влияние на анимацию

Хотя параметр напрямую не относится к анимации, он влияет на момент её запуска:

tippy('.btn', {
  hideOnClick: true,
});

При клике тултип начинает анимацию скрытия. В сочетании с delay и duration можно контролировать поведение интерфейса при взаимодействии.

Анимация при интерактивных тултипах

При interactive: true тултип остаётся открытым при наведении на него. Это влияет на логику анимации:

tippy('.btn', {
  interactive: true,
  delay: [100, 200],
});

Важно учитывать:

  • задержка скрытия должна быть больше, чтобы пользователь успел перейти курсором
  • анимация не должна быть слишком быстрой

Производительность анимации

Анимации влияют на производительность, особенно при большом количестве тултипов.

Рекомендации:

  • использовать transform и opacity вместо top/left
  • избегать сложных теней и фильтров
  • минимизировать длительность
  • отключать анимацию при необходимости

Пример оптимальной анимации:

transition: opacity 0.2s ease, transform 0.2s ease;

Комбинирование параметров

Гибкость Tippy.js раскрывается при сочетании нескольких параметров:

tippy('.btn', {
  animation: 'scale',
  duration: [200, 150],
  delay: [100, 0],
  inertia: true,
});

Результат:

  • плавное появление с задержкой
  • быстрое скрытие
  • эффект “упругости”

Поведение при отключенной анимации

Если указано animation: false, библиотека:

  • отключает CSS-переходы
  • мгновенно показывает/скрывает тултип

Это полезно:

  • для тестирования
  • в условиях слабых устройств
  • при строгих требованиях к скорости интерфейса

Расширенные сценарии

Динамическое изменение анимации

instance.setProps({
  animation: 'shift-away',
});

Позволяет менять поведение тултипа в зависимости от контекста.

Использование с библиотеками анимации

Tippy.js можно интегрировать с:

  • CSS-анимациями
  • Web Animations API
  • сторонними библиотеками (например, GSAP)

При этом стандартные параметры могут быть отключены:

tippy('.btn', {
  animation: false,
  onShow(instance) {
    // кастомная анимация
  },
});

Типичные ошибки

  • слишком длинная длительность (duration > 1000)
  • конфликт CSS-анимаций и встроенных параметров
  • отсутствие синхронизации delay и interactive
  • использование неподдерживаемых имен анимаций
  • перегруженные CSS-эффекты

Практические шаблоны

Минималистичная анимация:

{
  animation: 'fade',
  duration: 150
}

Акцентированная:

{
  animation: 'scale',
  duration: [300, 200],
  inertia: true
}

Без отвлечения:

{
  animation: false
}

Взаимодействие с темами (theme)

Анимация может выглядеть по-разному в зависимости от темы:

tippy('.btn', {
  theme: 'light',
  animation: 'shift-away',
});

Темы задают базовые стили, включая:

  • тени
  • цвет
  • начальные трансформации

Контроль через события

Анимация тесно связана с жизненным циклом тултипа:

  • onShow
  • onHide
  • onMount
  • onHidden

Пример:

tippy('.btn', {
  onShow(instance) {
    console.log('Начало анимации');
  },
  onHidden(instance) {
    console.log('Анимация завершена');
  },
});

Позволяет синхронизировать другие действия с визуальными эффектами.

Выводы по настройке

Грамотная настройка анимации в Tippy.js — это баланс между:

  • скоростью
  • читаемостью интерфейса
  • отзывчивостью
  • визуальной выразительностью

Правильное использование параметров animation, duration, delay и CSS позволяет добиться профессионального уровня взаимодействия без перегрузки интерфейса.

Оглавление