InertiaPlugin для инерционного движения

GSAP (GreenSock Animation Platform) предоставляет широкие возможности для создания плавной анимации, а InertiaPlugin позволяет реализовать физически правдоподобное инерционное движение объектов. Этот плагин особенно полезен для интерактивных интерфейсов, перетаскиваемых элементов и сложных анимаций, где необходимо имитировать замедление, трение и естественное скольжение.

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

InertiaPlugin не включён в стандартный пакет GSAP и требует отдельного подключения. Обычно это делается через:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/InertiaPlugin.min.js"></script>

После подключения плагин автоматически регистрируется и становится доступен для использования в анимациях.

Основные возможности

  1. Инерционная анимация свойств InertiaPlugin позволяет задавать свойства объектов с учетом начальной скорости и последующего замедления. Например:
gsap.to("#box", {
  x: 500,
  duration: 2,
  inertia: { velocity: 200, resistance: 50 }
});
  • velocity — начальная скорость (px/сек).
  • resistance — коэффициент сопротивления, замедляющий движение (чем выше значение, тем быстрее объект останавливается).
  1. Работа с draggable объектами В комбинации с Draggable можно создавать реалистичное движение после отпускания элемента:
Draggable.create("#ball", {
  type: "x,y",
  inertia: true
});

inertia: true активирует встроенную инерционную анимацию с учетом текущей скорости перетаскивания и сопротивления.

  1. Настройка физических характеристик Плагин поддерживает дополнительные параметры, которые позволяют моделировать сложные физические эффекты:
  • resistance — сила трения, уменьшающая скорость.
  • min / max — ограничения по движению, например границы контейнера.
  • autoKill — автоматическая остановка анимации, если объект пересекает заданные пределы.
gsap.to("#circle", {
  x: 800,
  inertia: {
    velocity: 400,
    resistance: 100,
    min: 0,
    max: 800,
    autoKill: true
  }
});
  1. Сопряжение с другими tween-анимациями InertiaPlugin может работать вместе с классическими tween и timeline-анимациями GSAP. Это позволяет создавать цепочки движений, где после завершения одной анимации начинается инерционное скольжение:
let tl = gsap.timeline();
tl.to("#square", { x: 300, duration: 1 })
  .to("#square", {
    inertia: { velocity: 500, resistance: 80 },
    duration: 3
  });

Практические советы

  • Подбирайте resistance под интерфейс: для UI-элементов обычно используют значения 50–200, для игровых объектов — более динамичные.
  • Сочетание с границами: важно указывать min и max, иначе объект может уйти за пределы видимой области.
  • Скорость при отпускании Draggable: GSAP автоматически вычисляет моментальную скорость и передает её плагину, но при кастомных анимациях её можно задавать вручную через velocity.

Примеры применения

  1. Скроллинг с инерцией
let container = document.querySelector(".scroll-container");

Draggable.create(container, {
  type: "y",
  inertia: true
});
  1. Карусель изображений
let carousel = document.querySelector(".carousel");

Draggable.create(carousel, {
  type: "x",
  bounds: { minX: -1000, maxX: 0 },
  inertia: true
});
  1. Симуляция физики объектов
gsap.to("#ball", {
  x: 600,
  inertia: { velocity: 300, resistance: 50 },
  rotation: 360
});

Здесь движение сопровождается вращением объекта, создавая эффект катящегося шарика.

Отличительные особенности

  • Позволяет управлять не просто анимацией к конечной позиции, а физически корректным скольжением.
  • Интегрируется с Draggable и Timeline для сложных интерактивных сценариев.
  • Настраиваемые ограничения позволяют безопасно применять анимации в UI без выхода за границы контейнера.
  • Поддерживает множественные свойства одновременно, включая координаты, вращение, масштаб и прозрачность.

Использование InertiaPlugin в GSAP открывает возможность создавать анимации, которые ощущаются естественно и динамично, имитируя физическое поведение объектов с учетом скорости, трения и сопротивления.

Оглавление