Анимация зависящая от прокрутки

Анимация при прокрутке страницы основана на библиотеке https://greensock.com/scrolltrigger от компании Greensock. Данная функция находится в Альфа тестировании. Так что если вы будете находить какие-либо проблемы в использовании это библиотеки пишите на почту creatium@uplinestudio.ru.

Статус ScrollTrigger

Параметр Статус ScrollTrigger включает привязку анимации к прокрутке страницы. Важный момент что если вы включите ScrollTrigger вместе с Timeline, то вся анимация внутри Timeline будет привязана к прокрутке сайта.

Что использовать в качестве триггера

Триггер - это блок на сайте положение которого отслеживается при прокрутке.

В качестве триггера может быть использован как сам анимируемый элемент или Timeline так и любой другой элемент которому привязан класс. Важно понять, что если вы укажете в качестве триггера внешний класс, то он не станет анимируемым. Анимироваться будет все тот же элемент к которому вы привязали ScrollTrigger, но делать он это будет следя за ваши внешним классом.

Настройка старта

Настройка старта - определяет начальную позицию ScrollTrigger. Это может быть любое из следующего:

• Строка — описывает место на endTrigger (или триггер, если он не определен) и место на скроллере , которое должно встретиться, чтобы завершить ScrollTrigger. Так, например, "bottom center"означает «когда нижняя часть endTrigger попадает в центр скроллера» . "center 100px"означает «когда центр endTrigger достигает 100 пикселей вниз от верхней части скроллера» (при вертикальной прокрутке). Вы можете использовать такие ключевые слова, как "top", "bottom", "center" или проценты, например «80%», или значения в пикселях, например «100px». Проценты и пиксели всегда относятся к верхней/левой части элемента/окна просмотра.«300 пикселей за пределами начала» или «+=100%» означает «высота прокрутки за пределами начала». "max"это специальное ключевое слово, указывающее максимальную позицию прокрутки.

• Число — точное значение прокрутки, 200которое срабатывает, когда область просмотра/прокрутка прокручивается ровно на 200 пикселей.

Настройка завершения

Настройка завершения - определяет конечную позицию ScrollTrigger. Это может быть любое из следующего:

• Строка — описывает место на endTrigger (или триггер, если он не определен) и место на скроллере , которое должно встретиться, чтобы завершить ScrollTrigger. Так, например, "bottom center"означает «когда нижняя часть endTrigger попадает в центр скроллера» . "center 100px" означает «когда центр endTrigger достигает 100 пикселей вниз от верхней части скроллера» (при вертикальной прокрутке). Вы можете использовать такие ключевые слова, как "top", "bottom", "center" или проценты, например «80%», или значения в пикселях, например «100px». Проценты и пиксели всегда относятся к верхней/левой части элемента/окна просмотра.«300 пикселей за пределами начала» или «+=100%» означает «высота прокрутки за пределами начала». "max"это специальное ключевое слово, указывающее максимальную позицию прокрутки.

• Число — точное значение прокрутки, 200которое срабатывает, когда область просмотра/прокрутка прокручивается ровно на 200 пикселей.

Описание поведения (попадание, уход, возврат, уход)

Описание поведения — определяет, как связанная анимация управляется в 4 различных местах переключения — при попадании, при уходе, при возврате и при уходе после возврата, в указанном порядке. Значение по умолчанию play none none none. Таким образом Описание поведения "play pause resume reset", будет воспроизводиться анимация при входе, приостанавливаться при выходе, возобновляться при повторном входе в обратном направлении и сбрасываться (перематываться назад к началу) при прокрутке до самого начала. Вы можете использовать любое из следующих ключевых слов для каждого действия: "play", "pause", "resume", "reset", "restart", "complete", "reverse" и "none".

Плавность анимации

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

• ВКЛ — связывает ход анимации напрямую с ходом ScrollTrigger.
• Число — количество времени (в секундах), которое должно занять указатель воспроизведения, чтобы догнать позицию полосы прокрутки за 0,5 секунды нужно указать 50. Это отлично подходит для сглаживания елементов.

Показать маркеры (для настройки анимации)

Показать маркеры - добавляет маркеры, полезные при разработке/устранении неполадок. Вкл - добавляет их со значениями по умолчанию.

Закрепление

Не тестированная функциональность.

Закрепление — элемент (или текст селектора для элемента), который должен быть закреплен в то время, когда ScrollTrigger активен, что означает, что он будет казаться «застрявшим» в своей начальной позиции, в то время как остальная часть содержимого продолжает прокручиваться под ним. Допускается только один закрепленный элемент, но он может содержать любое количество элементов. Установка Закрепления приводит к закреплению triggerэлемента. Предупреждение: не анимируйте сам закрепленный элемент, потому что это испортит измерения (ScrollTrigger сильно оптимизирован для повышения производительности и выполняет максимально возможный предварительный расчет). Вместо этого вы можете вкладывать элементы таким образом, чтобы анимировать только элементы ВНУТРИ закрепленного элемента.

Присвоить активному элементу

Например, "active"добавляет «активный» класс к элементу триггера, когда активен ScrollTrigger.

Завершение анимации раньше

Если ВКЛ, это заставит анимацию текущего ScrollTrigger завершиться, если вы покинете область триггера быстрее, чем определенная скорость (по умолчанию 2500px/s). Это помогает избежать перекрытия анимаций, когда пользователь быстро прокручивает страницу. Вы можете указать число для минимальной скорости, например 3000. Тогда это свойство будет активироваться только в том случае, если скорость превышает 3000 пикселей в секунду.

Секция доступна по номеру #371