Кастомные easing-функции

Locomotive Scroll предоставляет мощный инструмент для плавного скроллинга с поддержкой инерции, но его потенциал полностью раскрывается при использовании кастомных easing-функций. Easing определяет скорость анимации во времени, что позволяет создавать уникальные визуальные эффекты, от линейного движения до сложных кривых с ускорением и замедлением.

Подключение кастомного easing

Easing-функции в Locomotive Scroll настраиваются через объект конфигурации при инициализации скроллера:

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true,
  lerp: 0.1, // базовое сглаживание
  easing: (t) => t < 0.5 ? 2*t*t : -1+(4-2*t)*t // кастомная функция
});

Ключевые моменты:

  • t — это значение прогресса анимации от 0 до 1.
  • Функция должна возвращать число от 0 до 1, определяющее текущую позицию скролла относительно времени.
  • Можно использовать как простые математические выражения, так и сложные кривые.

Типы easing-функций

  1. Линейные Простейший тип, при котором скорость постоянна:

    easing: t => t

  2. Квадратичные и кубические Позволяют создавать ускорение или замедление:

    easing: t => t*t // ускорение
easing: t => 1 - (--t)*t*t // замедление

  3. Синусоидальные Обеспечивают мягкое начало и окончание движения:

    easing: t => 0.5 * (1 - Math.cos(Math.PI * t))

  4. Экспоненциальные Создают эффект резкого старта или финиша:

    easing: t => t === 0 ? 0 : Math.pow(1024, t-1)

Комбинирование кривых

Для сложных эффектов можно комбинировать несколько функций:

const customEasing = t => {
  if (t < 0.3) return 3*t*t;
  if (t < 0.7) return 0.5 + 2*(t-0.5)*(t-0.5);
  return 1 - Math.pow(1-t, 3);
}

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true,
  easing: customEasing
});

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

Влияние lerp на кастомный easing

lerp (linear interpolation) определяет сглаживание движения скролла. При использовании кастомных easing-функций нужно учитывать, что большие значения lerp смягчают эффект кривой, а малые — делают движение более резким. Оптимальные значения обычно находятся в диапазоне 0.05–0.15.

const scroll = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true,
  lerp: 0.08,
  easing: t => t < 0.5 ? 2*t*t : -1+(4-2*t)*t
});

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

  • Для визуальной согласованности с анимациями на странице рекомендуется использовать одинаковые easing для скролла и CSS-анимаций.
  • Проверять работу кривой при разных разрешениях экрана и скорости скролла, чтобы избежать рывков.
  • В сложных интерфейсах можно динамически менять easing-функцию в зависимости от позиции или контента.

Визуальное тестирование

Создание графика easing-функции помогает визуально оценить движение. Для этого можно использовать requestAnimationFrame:

function drawEasing(easing) {
  const canvas = document.querySelector('canvas');
  const ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.beginPath();
  for (let i = 0; i <= 1; i += 0.01) {
    const x = i * canvas.width;
    const y = canvas.height - easing(i) * canvas.height;
    ctx.lineTo(x, y);
  }
  ctx.stroke();
}

drawEasing(t => 0.5 * (1 - Math.cos(Math.PI * t)));

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

Настройка на практике

В реальных проектах кастомные easing-функции применяются:

  • Для плавного появления элементов при скролле.
  • Для динамического смещения фона (parallax) с различной скоростью.
  • Для скролл-триггеров, где нужно создать ощущение инерции или резкости.

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

Оглавление