snap для привязки значений

Функция snap в GSAP предназначена для привязки значений к дискретным шагам или фиксированным точкам. Она особенно полезна при создании анимаций, где требуется точное позиционирование, округление значений или ограничение движения объектов определёнными границами.

Основные формы использования snap

  1. Привязка к числовым шагам Самый простой вариант — привязка к числовому шагу.

    gsap.to(".box", {
  x: 0,
  duration: 2,
  snap: {
    x: 50
  }
});

    В этом примере любое изменение координаты x будет округлено до ближайшего кратного 50. Если элемент смещается на 73px, он “привяжется” к 50px; если на 89px — к 100px.

  2. Привязка к массиву значений Можно задать конкретные точки привязки через массив:

    gsap.to(".box", {
  x: 0,
  duration: 2,
  snap: {
    x: [0, 100, 200, 300]
  }
});

    Любое значение x будет выбрано из массива наиболее близким к текущему.

  3. Привязка через функцию snap может принимать функцию для сложных вычислений:

    gsap.to(".box", {
  x: 0,
  duration: 2,
  snap: {
    x: value => Math.round(value / 25) * 25
  }
});

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

Использование с различными свойствами

Snap работает не только с координатами x и y, но и с другими свойствами анимации:

  • Скейл и поворот

    gsap.to(".box", {
  scale: 1.0,
  rotation: 0,
  duration: 1.5,
  snap: {
    scale: 0.25,
    rotation: 15
  }
});

    Все значения будут округлены до ближайшего шага: масштаб к 0.25, 0.5 и т.д., поворот к 15°, 30° и т.д.

  • Цветовые значения GSAP поддерживает snap даже для цветов, используя RGB или HEX шаги, например для плавной палитры.

Применение snap в анимациях перетаскивания

При работе с Draggable привязка часто используется для ограничения перемещений:

Draggable.create(".box", {
  type: "x",
  bounds: { minX: 0, maxX: 400 },
  inertia: true,
  snap: {
    x: value => Math.round(value / 50) * 50
  }
});

Здесь при отпускании мыши или пальца объект автоматически привязывается к ближайшей отметке с шагом 50px. Это позволяет создавать сеточные интерфейсы, карусели или пиксельные игры с точной подгонкой элементов.

Важные нюансы

  • snap не влияет на анимацию, а только на результат. GSAP всё равно плавно интерполирует значения, но конечное значение будет привязано к заданной точке.
  • Можно комбинировать с другими функциями GSAP, например с stagger, modifiers и yoyo.
  • Поддержка динамических массивов: массив привязки может быть рассчитан на лету, что позволяет создавать адаптивные сетки и анимации с изменяющимися шагами.

Примеры сложных конфигураций

  1. Динамическая привязка к ближайшему элементу списка

    const positions = [0, 120, 240, 360];
gsap.to(".box", {
  x: 0,
  duration: 2,
  snap: {
    x: value => {
      return positions.reduce((prev, curr) => Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev);
    }
  }
});

  2. Сочетание snap с модификатором для мягкой привязки

    gsap.to(".box", {
  x: 0,
  duration: 2,
  modifiers: {
    x: gsap.utils.snap(50)
  }
});

    modifiers позволяет изменять значения на лету, а snap задаёт жесткие точки привязки.

Итоговые рекомендации по snap

  • Использовать для сеток, каруселей и интерфейсов с дискретными шагами.
  • Выбирать подходящий тип привязки: число для регулярного шага, массив для фиксированных точек, функция для сложной логики.
  • Комбинировать с modifiers для максимальной гибкости в динамических анимациях.

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

Оглавление