Snap для привязки к позициям

Snap в GSAP позволяет автоматически привязывать анимируемые значения к определённым точкам или шагам, что особенно полезно для создания эффектов «прилипших» элементов, сеток, шкал или слайдеров. Механизм Snap работает как промежуточный фильтр значений: после расчёта GSAP берёт вычисленное значение и корректирует его по заданной функции или сетке.

Синтаксис использования Snap реализован через объект snap или метод gsap.utils.snap(). Простейший пример привязки к шагу выглядит так:

gsap.to(".box", {
  x: 123,
  snap: 50, // привязка к ближайшему шагу 50
  duration: 1
});

В этом случае конечное значение x автоматически округлится до ближайшего кратного 50. Если в примере значение 123, Snap округлит его до 100 или 150 в зависимости от ближайшего шага.

Использование функций Snap

Помимо простых числовых шагов, Snap позволяет использовать функции для динамической привязки. Это особенно полезно при сложной логике сетки или анимации, зависящей от контекста.

gsap.to(".box", {
  x: 137,
  snap: function(value) {
    return Math.round(value / 25) * 25;
  },
  duration: 1
});

Здесь значение x сначала делится на 25, округляется и умножается обратно, создавая сетку шагов по 25 пикселей.

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

Привязка к массиву значений

Snap также поддерживает привязку к конкретным заранее заданным значениям. Для этого используется массив. GSAP автоматически выберет ближайшее значение из списка:

gsap.to(".box", {
  x: 137,
  snap: [0, 50, 100, 150, 200],
  duration: 1
});

Здесь x будет автоматически скорректирован к ближайшему числу из массива — в примере 137 превратится в 150.

Snap и Draggable

Библиотека Draggable в сочетании с Snap позволяет создавать «магнитные» элементы, которые прилипают к определённым точкам при перетаскивании.

Draggable.create(".box", {
  type: "x",
  bounds: "#container",
  inertia: true,
  snap: {
    x: function(endValue) {
      return Math.round(endValue / 100) * 100;
    }
  }
});

Функция Snap получает конечное значение endValue после инерции и возвращает ближайшую «защелку» в сетке. Это позволяет создавать интерфейсы с шаговым движением, карусели, сетки карточек и другие элементы UX, где важна точность позиции.

Настройка шагов и сеток

Для привязки к сетке можно использовать простую математику:

snap: function(value) {
  const step = 30;
  return Math.round(value / step) * step;
}

Преимущество такого подхода — универсальность. Изменив переменную step, сетка автоматически перестраивается. Для сложных интерфейсов удобно создавать динамические массивы шагов, исходя из ширины контейнера или числа элементов.

Snap для многомерных значений

GSAP поддерживает Snap не только для отдельных чисел, но и для объектов с координатами:

gsap.to(".box", {
  x: 137,
  y: 82,
  snap: {
    x: 50,
    y: function(value) { return Math.round(value / 20) * 20; }
  },
  duration: 1
});

В этом примере x привязывается к ближайшему кратному 50, а y — к ближайшему кратному 20. Такой подход позволяет легко управлять анимацией элементов на сетке или рабочей области с фиксированными шагами.

Сочетание с Timeline

Snap хорошо интегрируется с Timeline GSAP. Можно анимировать несколько свойств и одновременно применять Snap:

gsap.timeline()
  .to(".box", { x: 137, snap: 50, duration: 1 })
  .to(".box", { y: 87, snap: function(val){ return Math.round(val/10)*10; }, duration: 1 });

Timeline сохраняет корректность Snap для каждой отдельной анимации, что особенно полезно при создании последовательных эффектов «прилипания».

Полезные советы

  • Оптимизация производительности: Snap вычисляет корректировку после анимации, поэтому для больших массивов значений или сложных функций лучше использовать простые шаги или массивы.
  • Плавность анимации: Snap корректирует конечное значение, но не вмешивается в промежуточные кадры, поэтому движение остаётся плавным.
  • Интеграция с событиями: Snap отлично работает с событиями Drag и Scroll, позволяя создавать интерактивные интерфейсы с «магнитным» эффектом.

Snap в GSAP превращает простые анимации в аккуратные и точные движения, упрощает создание сеток, шаговых интерфейсов и динамических элементов.

Оглавление