lerp

В библиотеке Locomotive Scroll плавное скроллирование реализуется через внутренние методы интерполяции. Одним из ключевых инструментов для управления плавностью является lerp (linear interpolation). Этот механизм позволяет сглаживать движения, создавая эффект естественного замедления и ускорения, а также предотвращает резкие «рывки» при прокрутке страницы.

Принцип работы Lerp

Функция линейной интерполяции (lerp) вычисляет значение между двумя точками на основе коэффициента интерполяции:

lerp(current, target, ease)
  • current – текущее значение позиции (например, текущая прокрутка).
  • target – целевое значение, к которому стремимся.
  • ease – коэффициент сглаживания, число от 0 до 1. Чем ближе к 0, тем плавнее переход; чем ближе к 1, тем движение ближе к резкому.

Принцип работы: каждый кадр Locomotive Scroll пересчитывает позицию с использованием lerp. В результате фактическая прокрутка никогда не скачет напрямую к целевому значению, а постепенно подстраивается под него.

Настройка Lerp в Locomotive Scroll

При инициализации скролла можно задать параметр lerp, который определяет степень плавности:

const scroll = new LocomotiveScroll({
  el: document.querySelector('#scroll-container'),
  smooth: true,
  lerp: 0.1
});
  • smooth: true – включает плавный скролл.
  • lerp: 0.1 – задаёт коэффициент интерполяции; более низкие значения создают более мягкое скольжение.

Важно помнить: lerp влияет на скорость отклика скролла. При слишком низком значении движение будет «тянущимся», при слишком высоком – скролл станет почти мгновенным, теряя эффект плавности.

Применение Lerp к кастомным анимациям

Помимо стандартного скролла, lerp удобно использовать для синхронизации анимаций элементов с прокруткой. Пример с элементом, который должен следовать за скроллом с плавным смещением:

const target = 0;
let current = 0;
const ease = 0.08;

scroll.on('scroll', (obj) => {
  const scrollY = obj.scroll.y;
  current = lerp(current, scrollY, ease);
  element.style.transform = `translateY(${current}px)`;
});

function lerp(start, end, t) {
  return start * (1 - t) + end * t;
}

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

Настройка параметра Lerp для разных устройств

Эффект lerp может ощущаться по-разному на десктопе и мобильных устройствах. Для адаптивного поведения рекомендуется динамически изменять коэффициент:

const isMobile = window.innerWidth < 768;
const lerpValue = isMobile ? 0.05 : 0.1;

const scroll = new LocomotiveScroll({
  el: document.querySelector('#scroll-container'),
  smooth: true,
  lerp: lerpValue
});
  • Меньшее значение для мобильных устройств компенсирует более «тяжёлую» анимацию.
  • На десктопе значение выше создаёт более отзывчивый скролл.

Взаимодействие Lerp с другими параметрами Locomotive Scroll

  • smooth – включение плавного скролла обязательно для работы lerp.
  • multiplier – изменяет скорость прокрутки, на которую lerp будет ориентироваться. Высокий multiplier при низком lerp создаёт эффект «растянутого» скролла.
  • getDirection – вместе с lerp позволяет определять направление движения с плавной интерполяцией, полезно для появления анимаций при прокрутке вверх или вниз.

Практические рекомендации

  • Значение lerp = 0.1–0.15 оптимально для большинства десктоп-проектов.
  • Для параллакс-эффектов стоит использовать отдельный lerp для элементов, отличающийся от глобального скролла.
  • Не использовать lerp с smooth: false – эффект интерполяции не будет работать.
  • Для анимаций с задержкой лучше использовать отдельные функции lerp, чтобы не смешивать визуальное смещение с реальной прокруткой.

Расширенные техники

  1. Динамическое изменение lerp: изменение коэффициента на основе скорости прокрутки позволяет создавать эффект «ускорения и замедления»:
const speed = Math.abs(obj.delta.y);
const dynamicLerp = Math.min(0.2, 0.05 + speed / 200);
current = lerp(current, obj.scroll.y, dynamicLerp);

  1. Комбинация с requestAnimationFrame: для сложных визуальных эффектов можно отделить рендер элементов от события scroll, используя собственный цикл с lerp.

  2. Интеграция с GSAP: значения, получаемые через lerp, легко передавать в анимации GSAP для создания плавных таймлайнов, синхронизированных с прокруткой.

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

Оглавление