Анимация по триггеру «Трансформация по скроллу»

Триггер Трансформация по скроллу (Scroll transform) позволяет настроить анимацию при прокрутке экрана. Анимация будет запускаться при скролле триггерного элемента, который можно задать в параметрах.

Видео: Анимация по триггеру «Трансформация по скроллу»

Настройки для анимации по триггеру «Трансформация по скроллу»

Триггерный элемент (Trigger element)

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

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

Начало (Start)

Настройка позволяет установить момент начала воспроизведения анимации на экране. Начало анимации определяется в зависимости от положения триггерного элемента во вьюпорт.

По умолчанию выбран параметр «Элемент начинает появляться во вьюпорт», то есть при появлении верхней границы триггерного элемента на экране.

При выборе параметра «Половина элемента появилась во вьюпорт» старт анимации будет происходить в момент появления середины триггерного элемента в области просмотра.

При выборе параметра «Элемент полностью появился во вьюпорт» анимация начнется, когда триггерный элемент полностью появится в границах видимой пользователю области страницы.

Конец (End)

Настройка позволяет установить момент окончания воспроизведения анимации на экране. Конец анимации определяется в зависимости от положения триггерного элемента во вьюпорт.

По умолчанию выбран параметр «Элемент полностью вышел из вьюпорт» , то есть при полном уходе триггерного элемента из границ видимой пользователю области страницы.

При выборе параметра «Половина элемента вышла из вьюпорт» старт анимации будет происходить в момент, когда половина триггерного элемента уйдет из области просмотра.

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

Смещение (Offset)

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

Для добавления смещения нажмите на чекбокс рядом с опцией «Начало» или «Конец» и введите нужное значение в поле. Значение смещения можно задать в пикселях или в процентах от высоты триггерного элемента — оно может быть положительным или отрицательным.

Смещение начала анимации

Выбранное значение смещения отсчитывается от положения триггерного элемента, установленного в настройке «Начало».

Примеры:

Выбраны параметры «Элемент начинает появляться во вьюпорт» и смещение «30%» — граница старта анимации будет смещена на 30% вниз. В этом случае анимация начнется, когда верхняя треть триггерного элемента появится в области просмотра.

Выбраны параметры «Элемент начинает появляться во вьюпорт» и смещение «-100px» — граница старта анимации будет смещена на 100px вверх. Анимация начнется при появлении во вьюпорте области, которая расположена на 100px выше верхней границы триггерного элемента.

Смещение окончания анимации

Выбранное значение смещения отсчитывается от положения триггерного элемента, установленного в настройке «Конец».

Примеры:

Выбраны параметры «Элемент полностью вышел из вьюпорт» и смещение «-30%» — граница окончания анимации будет смещена на 30% вверх. В этом случае анимация закончится, когда нижняя треть триггерного элемента еще будет оставаться в области просмотра.

Выбраны параметры «Элемент полностью вышел из вьюпорт» и смещение «100px» — граница окончания анимации будет смещена на 100px вниз. Анимация закончится, когда триггерный элемент полностью уйдет из области просмотра и пользователь проскроллит дополнительно 100px страницы.

Сглаживание (Smoothing)

Настройка позволяет установить задержку анимации для большей плавности эффекта. Значение сглаживания устанавливается в секундах. Например, если установить задержку 1 секунда, то анимация будет реагировать на движение скролла с запозданием на это время.

Дополнительные настройки

Дополнительные настройки триггерного элемента можно открыть, нажав на три точки справа.

Что такое Границы вьюпорта (Viewport boundaries)

По умолчанию зоной видимости триггерного элемента считается вьюпорт (окно просмотра).

У вьюпорта есть две границы — верхняя и нижняя.

Нижняя граница

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

Верхняя граница

Верхняя граница вьюпорта будет окончанием зоны видимости триггерного элемента — в этой точке закончится анимация. В режиме предварительного просмотра верхняя граница помечается красным маркером scroller-end.

По умолчанию верхняя граница вьюпорта (scroller-end) совпадает с верхней границей области просмотра страницы (значение 0%), а нижняя граница вьюпорта (scroller-start) — с нижней границей области просмотра страницы (100%).

Настройка границ вьюпорта

Изменить значения этих границ можно в настройке Границы вьюпорта.

Нижняя граница вьюпорта

Настройка позволяет управлять границей начала анимации.

Когда точка старта (start), установленная для триггерного элемента, достигнет этой границы (scroller-start) — анимация начнется. На предварительном просмотре это выглядит следующим образом:

Верхняя граница вьюпорта

Настройка позволяет управлять границей окончания анимации.

Когда точка окончания (end), установленная для триггерного элемента, достигнет этой границы (scroller-end) — анимация закончится. На предварительном просмотре это выглядит следующим образом:

Для границ вьюпорта можно установить следующие значения:

top — верхняя граница области просмотра;

center — середина области просмотра;

bottom — нижняя граница области просмотра;

любое значение в пикселях или процентах от высоты области просмотра.

Например, если установить обе границы в 50%, это не значит, что область просмотра схлопнется до нуля. В этом случае анимация будет работать следующим образом:

начнется, когда точка старта у триггерного элемента достигнет середины области просмотра.

закончится, когда точка окончания у триггерного элемента достигнет середины области просмотра.

Маркеры границ вьюпорта по умолчанию отображаются при предварительном просмотре. Их можно скрыть при помощи чекбокса Показать границы в режиме просмотра.

Пресеты

Вы можете выбрать один из предустановленных пресетов — это добавит набор эффектов с уже заданными настройками. Доступны следующие виды пресетов:

Проявление (Fade In)

Увеличение (Scale In)

Увеличение снизу (Scale In Bottom)

Отражение по горизонтали (Flip Horizontal)

Отражение по вертикали (Flip Vertical)

Скольжение вверх (Slide In From Top)

Скольжение влево (Slide In From Left)

Скольжение вправо (Slide In From Right)

Скольжение вниз (Slide In From Bottom)

Пользовательский (Custom)

По умолчанию при добавлении анимации в настройках пресетов установлен параметр Проявление (Fade In).

Эффекты (Effects)

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

Для настройки доступны 11 эффектов:

Движение (Move) — позволяет передвигать элемент по оси X, Y и Z.

Масштабирование (Scale) — позволяет масштабировать (увеличивать или уменьшать) размеры элемента в пределах от 0 до 100% (значения от 0 до 1) или более 100% (значения больше 1).

Поворот (Rotate) — позволяет поворачивать элемент по оси X, Y и Z.

Наклон (Skew) — позволяет наклонять элемент по оси X и Y.

Непрозрачность (Opacity) — позволяет менять непрозрачность элемента от 0 (полностью невидимый) до 100% (полностью видимый) или наоборот (от видимого к невидимому).

Размер (Size) — позволяет менять размер элемента по ширине и высоте.

Цвет шрифта (Text Color) — позволяет менять цвет текста.

Цвет фона (Background Color) — позволяет менять цвет фона.

Ширина границы (Border Width) — позволяет менять ширину границы.

Закругленные углы (Radius) — позволяет менять радиус одного или нескольких углов.

Цвет границы (Border Color) — позволяет менять цвет границы.

Кликнув на название эффекта, вы перейдете к его настройкам. Здесь вы можете просмотреть заданные по умолчанию опции и установить желаемые параметры.

Для эффектов доступны следующие настройки:

Начало (Start) и Конец (End)

Настройка позволяет задать значение параметров эффекта в начале и в конце анимации.

Ключевые кадры эффекта (Effect keyframes)

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

Пример: начальная точка 0%, конечная точка 50% — эффект будет работать от начала до середины всей анимации.

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

Интерполяция (Easing)

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

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

Брейкпоинты (Breakpoints)

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

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

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