Настало время поговорить про скролл. Вот этот эффект, который происходит при листании мемасов и остального, который задал стандарт потребления контента.

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

А потом пришли Эплы и сказали "вы недостаточно круто делаете" и добавили для этого эффекта физики, которая стала стандартом: трение, инерция, фрикция, упругость. Убираешь палец с экрана или трекпада и прокручивание продолжается какое-то время, как будто задавался вектор и он затухает постепенно. Просто звучит, на деле целая система внутри с отсчетом относительной скорости и разных настроек. Если там изменить настройки - получится иначе и уже "не так приятно". А еще отскакивание от краев через раббербенд для того, чтоб контент упал и ударился. А вообще это называется momentum scroll. Потом пришел easing. Везде, где есть вектор начальный и конечный в связке времени и движения - можно применить изинг. Добавляем кривые к базовому движению и все оживает.

Линейная анимация — когда объект движется с постоянной скоростью от начала до конца — выглядит механически. Мозг воспринимает её как неестественную потому что в реальном мире так ничего не движется.

Easing — это функция которая описывает как скорость меняется во времени. ease-in — начинает медленно, разгоняется. ease-out — начинает быстро, замедляется. ease-in-out — оба вместе.

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

CSS дал это из коробки через transition-timing-function. Но кастомный easing через cubic-bezier позволяет точно настроить характер движения — более упругий, более плавный, с характером конкретного продукта.

У Apple скролл на всех устройствах — отдельная история. macOS trackpad, iOS, iPadOS — везде одна физическая модель но тонко настроенная под контекст.

Trackpad на маке чувствуется принципиально иначе чем мышь. Инерция более длинная, rubber banding более мягкий, остановка более плавная. Это не случайно — Apple годами итерировали эти параметры и патентовали конкретные кривые затухания. Более того, если просто взять и подключить мышку к маку - скролл изменится и можно будет заметить, как он отличается на устройствах ввода здесь и сейчас.

Разница между iOS и Android скроллом до сих пор ощутима физически. Android догнал по плавности но характер движения другой — чуть более резкий старт, чуть другое затухание. Люди которые переходят между платформами замечают это в первый же день.

Главное, что тут стоит учитывать: Кастомный скролл почти всегда хуже нативного. Просто не трогайте.