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

Easing-функции определяют характер изменения анимации во времени. Они задают зависимость между прогрессом (обычно от 0 до 1) и фактическим значением анимируемого свойства. В контексте ScrollMagic easing-функции чаще всего используются совместно с библиотеками анимации, такими как GSAP, поскольку сам ScrollMagic отвечает за синхронизацию анимации со скроллом, а не за интерполяцию значений.

Базовые easing-функции делятся на несколько категорий:

  • Линейные (linear) — равномерное изменение без ускорения
  • Ускоряющиеся (ease-in) — медленный старт, затем ускорение
  • Замедляющиеся (ease-out) — быстрый старт, затем замедление
  • Комбинированные (ease-in-out) — сочетание ускорения и замедления

Кастомные easing-функции позволяют выйти за пределы стандартных кривых и создать уникальную динамику движения.

Роль easing в ScrollMagic

ScrollMagic управляет сценами (Scene), привязанными к позиции скролла. При использовании с GSAP easing-функция влияет на то, как именно изменяются значения внутри tween-анимации, синхронизированной со скроллом.

Пример связки:

var controller = new ScrollMagic.Controller();

var tween = gsap.to(".box", {
  x: 500,
  duration: 1,
  ease: "power2.out"
});

new ScrollMagic.Scene({
  triggerElement: ".box",
  duration: 300
})
.setTween(tween)
.addTo(controller);

Здесь easing "power2.out" задаёт кривую изменения движения блока.

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

GSAP предоставляет возможность создавать собственные easing-функции несколькими способами:

1. Через CustomEase

Модуль CustomEase позволяет задавать кривую с помощью SVG path.

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

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

Создание easing:

CustomEase.create("myEase", "M0,0 C0.25,0.1 0.25,1 1,1");

Использование:

gsap.to(".box", {
  x: 500,
  duration: 1,
  ease: "myEase"
});

Такая функция может быть передана в ScrollMagic через tween.

2. Через функцию

Можно задать easing как функцию:

function customEase(t) {
  return t * t; // квадратичное ускорение
}

Использование:

gsap.to(".box", {
  x: 500,
  duration: 1,
  ease: customEase
});

Аргумент t принимает значение от 0 до 1.

Интеграция кастомных easing со ScrollMagic

ScrollMagic не ограничивает тип easing-функций, так как работает на уровне таймлайна. Любая easing-функция, поддерживаемая GSAP, автоматически применяется.

Пример:

CustomEase.create("smoothJump", "M0,0 C0.3,0.8 0.7,0.2 1,1");

var tween = gsap.to(".element", {
  y: 300,
  ease: "smoothJump",
  duration: 1
});

new ScrollMagic.Scene({
  triggerElement: ".element",
  duration: 400
})
.setTween(tween)
.addTo(controller);

Связь easing и scroll-позиции

Важно учитывать, что при использовании ScrollMagic:

  • easing применяется внутри tween, а не к самому скроллу
  • если используется duration, прогресс анимации зависит от прокрутки
  • easing влияет на визуальное восприятие, но не изменяет привязку к scroll

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

Cubic Bezier как основа кастомных easing

Большинство easing-функций можно представить через кубическую кривую Безье:

cubic-bezier(x1, y1, x2, y2)

Пример:

gsap.to(".box", {
  x: 400,
  ease: "cubic-bezier(0.68, -0.55, 0.27, 1.55)"
});

Параметры задают форму кривой:

  • x1, y1 — первая контрольная точка
  • x2, y2 — вторая контрольная точка

Инструменты для генерации:

  • DevTools (Chrome Animation panel)
  • онлайн-редакторы cubic-bezier

Практические сценарии кастомных easing

1. Эффект «перепрыгивания»

CustomEase.create("bounceCustom", "M0,0 C0.2,1.2 0.4,0.8 1,1");

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

2. Резкое торможение

function sharpStop(t) {
  return 1 - Math.pow(1 - t, 4);
}

Подходит для интерфейсов с акцентом на точность.

3. Эластичное движение

function elastic(t) {
  return Math.sin(13 * Math.PI / 2 * t) * Math.pow(2, 10 * (t - 1));
}

Создаёт эффект пружины.

Производительность и оптимизация

Кастомные easing-функции могут влиять на производительность:

  • сложные математические функции увеличивают нагрузку
  • частые пересчёты при scroll-анимации требуют оптимизации
  • рекомендуется использовать заранее созданные easing вместо вычислений «на лету»

Оптимальные подходы:

  • использование CustomEase вместо функций
  • минимизация сложных вычислений внутри easing
  • тестирование на слабых устройствах

Отладка easing-функций

Методы проверки:

  • визуализация кривой (GSAP DevTools)
  • временное отключение ScrollMagic и запуск tween отдельно
  • логирование значений:
function debugEase(t) {
  console.log(t);
  return t * t;
}

Комбинирование easing и таймлайнов

При использовании Timeline можно комбинировать разные easing:

var timeline = gsap.timeline();

timeline.to(".box", {
  x: 200,
  ease: "power1.in"
})
.to(".box", {
  y: 200,
  ease: "bounce.out"
});

Интеграция с ScrollMagic:

new ScrollMagic.Scene({
  triggerElement: ".box",
  duration: 500
})
.setTween(timeline)
.addTo(controller);

Каждый этап анимации может иметь собственную easing-функцию.

Особенности восприятия easing при скролле

При скролл-анимации:

  • пользователь контролирует скорость
  • easing может восприниматься менее выраженно
  • быстрый скролл «сжимает» кривую

Поэтому:

  • предпочтительны более выраженные кривые
  • стоит избегать слишком тонких easing-эффектов
  • важно тестировать при разных сценариях прокрутки

Рекомендации по проектированию кастомных easing

  • избегать экстремальных значений (например, слишком резких скачков)
  • учитывать контекст интерфейса
  • использовать повторно проверенные кривые
  • сохранять баланс между выразительностью и читаемостью движения

Расширенные возможности

GSAP позволяет:

  • импортировать easing из SVG
  • использовать физические модели (например, инерцию)
  • комбинировать easing с stagger-анимациями

Пример stagger:

gsap.to(".item", {
  y: 100,
  stagger: 0.1,
  ease: "customEase"
});

В связке со ScrollMagic это создаёт сложные, но управляемые анимационные сцены.

Частые ошибки

  • использование easing без учёта scroll-контроля
  • чрезмерно сложные функции
  • несоответствие easing визуальному стилю интерфейса
  • игнорирование производительности

Корректная настройка easing-функций позволяет значительно повысить выразительность scroll-анимаций и создать уникальный пользовательский опыт без потери производительности.

Оглавление