Анимация по триггеру "Трансформация по скроллу"
Триггер Трансформация по скроллу (Scroll transform) позволяет настроить анимацию при прокрутке экрана. Анимация будет запускаться при скролле триггерного элемента, который можно задать в параметрах.
Смотрите подробный урок по созданию и адаптации анимации по триггеру Трансформация по скроллу:
Основные действия при работе с анимациями:
Настройка позволяет выбрать элемент, при скролле которого будет работать анимация. По умолчанию в этой настройке выбран анимируемый элемент — объект, к которому применена анимация.
Чтобы изменить триггерный элемент, кликните на его название или на иконку «прицел», выберите нужный элемент на холсте или в слоях и подтвердите выбор.
Настройка позволяет установить момент начала воспроизведения анимации на экране. Начало анимации определяется в зависимости от положения триггерного элемента во вьюпорт.
По умолчанию выбран параметр «Элемент начинает появляться во вьюпорт», то есть при появлении верхней границы триггерного элемента на экране.
При выборе параметра «Половина элемента появилась во вьюпорт» старт анимации будет происходить в момент появления середины триггерного элемента в области просмотра.
При выборе параметра «Элемент полностью появился во вьюпорт» анимация начнется, когда триггерный элемент полностью появится в границах видимой пользователю области страницы.
В режиме предварительного просмотра страницы настройка «Начало» отображается зеленым маркером start.
Настройка позволяет установить момент окончания воспроизведения анимации на экране. Конец анимации определяется в зависимости от положения триггерного элемента во вьюпорт.
По умолчанию выбран параметр «Элемент полностью вышел из вьюпорт», то есть при полном уходе триггерного элемента из границ видимой пользователю области страницы.
При выборе параметра «Половина элемента вышла из вьюпорт» старт анимации будет происходить в момент, когда половина триггерного элемента уйдет из области просмотра.
При выборе параметра «Элемент начинает выходить из вьюпорт» анимация начнется, когда триггерный элемент начнет уходить из области просмотра.
В режиме предварительного просмотра страницы настройка «Конец» отображается красным маркером end.
Настройка позволяет сдвинуть момент старта или конца анимации, указав смещение для триггерного элемента по отношению к вьюпорту. Это дает возможность еще более гибко управлять запуском и окончанием анимации в зависимости от положения триггерного элемента в области просмотра.
Для добавления смещения нажмите на чекбокс рядом с опцией «Начало» или «Конец» и введите нужное значение в поле. Значение смещения можно задать в пикселях или в процентах от высоты триггерного элемента — оно может быть положительным или отрицательным.
Смещение начала анимации
Выбранное значение смещения отсчитывается от положения триггерного элемента, установленного в настройке «Начало».
Примеры:
- Выбраны параметры «Элемент начинает появляться во вьюпорт» и смещение «30%» — граница старта анимации будет смещена на 30% вниз. В этом случае анимация начнется, когда верхняя треть триггерного элемента появится в области просмотра.
- Выбраны параметры «Элемент начинает появляться во вьюпорт» и смещение «-100px» — граница старта анимации будет смещена на 100px вверх. Анимация начнется при появлении во вьюпорте области, которая расположена на 100px выше верхней границы триггерного элемента.
Смещение окончания анимации
Выбранное значение смещения отсчитывается от положения триггерного элемента, установленного в настройке «Конец».
Примеры:
- Выбраны параметры «Элемент полностью вышел из вьюпорт» и смещение «-30%» — граница окончания анимации будет смещена на 30% вверх. В этом случае анимация закончится, когда нижняя треть триггерного элемента еще будет оставаться в области просмотра.
- Выбраны параметры «Элемент полностью вышел из вьюпорт» и смещение «100px» — граница окончания анимации будет смещена на 100px вниз. Анимация закончится, когда триггерный элемент полностью уйдет из области просмотра и пользователь проскроллит дополнительно 100px страницы.
Настройка позволяет установить задержку анимации для большей плавности эффекта. Значение сглаживания устанавливается в секундах. Например, если установить задержку 1 секунда, то анимация будет реагировать на движение скролла с запозданием на это время.
Дополнительные настройки триггерного элемента можно открыть, нажав на три точки справа.
По умолчанию зоной видимости триггерного элемента считается вьюпорт (окно просмотра).
У вьюпорта есть две границы — верхняя и нижняя.
- Нижняя граница
При скролле страницы все элементы появляются снизу вверх, поэтому нижняя граница считается началом зоны видимости триггерного элемента. В этой точке начнется анимация. В режиме предварительного просмотра нижняя граница помечается зеленым маркером scroller-start.
- Верхняя граница
Верхняя граница вьюпорта будет окончанием зоны видимости триггерного элемента — в этой точке закончится анимация. В режиме предварительного просмотра верхняя граница помечается красным маркером scroller-end.
По умолчанию верхняя граница вьюпорта (scroller-end) совпадает с верхней границей области просмотра страницы (значение 0%), а нижняя граница вьюпорта (scroller-start) — с нижней границей области просмотра страницы (100%).
Изменить значения этих границ можно в настройке Границы вьюпорта.
Нижняя граница вьюпорта
Настройка позволяет управлять границей начала анимации.
Когда точка старта (start), установленная для триггерного элемента, достигнет этой границы (scroller-start) — анимация начнется. На предварительном просмотре это выглядит следующим образом:
Верхняя граница вьюпорта
Настройка позволяет управлять границей окончания анимации.
Когда точка окончания (end), установленная для триггерного элемента, достигнет этой границы (scroller-end) — анимация закончится. На предварительном просмотре это выглядит следующим образом:
Для границ вьюпорта можно установить следующие значения:
- top — верхняя граница области просмотра;
- center — середина области просмотра;
- bottom — нижняя граница области просмотра;
- любое значение в пикселях или процентах от высоты области просмотра.
Значение верхней границы вьюпорта необязательно должно быть меньше значения нижней границы. Эти границы не очерчивают непосредственно область просмотра, а влияют область на точки начала и конца видимости триггерного элемента, т.е. на момент старта и окончания анимации. Поэтому при их выборе нужно исходить из желаемого пути анимации.
Например, если установить обе границы в 50%, это не значит, что область просмотра схлопнется до нуля. В этом случае анимация будет работать следующим образом:
- начнется, когда точка старта у триггерного элемента достигнет середины области просмотра.
- закончится, когда точка окончания у триггерного элемента достигнет середины области просмотра.
Таким образом, вы можете гибко управлять путем анимации с помощью двух типов настроек:
- настройки, привязанные к окну просмотра: границы вьюпорта — scroller-start и scroller-end;
- настройки, привязанные к триггерному элементу: начало и конец анимации — start и end в комбинации с настройками смещения триггерного элемента.
Маркеры границ вьюпорта по умолчанию отображаются при предварительном просмотре. Их можно скрыть при помощи чекбокса Показать границы в режиме просмотра.
Вы можете выбрать один из предустановленных пресетов — это добавит набор эффектов с уже заданными настройками. Доступны следующие виды пресетов:
- Проявление (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).
Если вы добавите новые эффекты или измените текущие, автоматически установится пользовательский пресет (Custom). Выбор предустановленного пресета сбросит все ваши настройки до значений, заданных по умолчанию для данного пресета.
Эффекты отвечают за то, какие действия будут происходить с элементом при анимации. Чтобы добавить эффект, нажмите на «+» справа.
Для настройки доступны 6 эффектов:
- Движение (Move) — позволяет передвигать элемент по оси X, Y и Z.
- Масштабирование (Scale) — позволяет масштабировать (увеличивать или уменьшать) размеры элемента в пределах от 0 до 100% (значения от 0 до 1) или более 100% (значения больше 1).
- Поворот (Rotate) — позволяет поворачивать элемент по оси X, Y и Z.
- Наклон (Skew) — позволяет наклонять элемент по оси X и Y.
- Непрозрачность (Opacity) — позволяет менять непрозрачность элемента от 0 (полностью невидимый) до 100% (полностью видимый) или наоборот (от видимого к невидимому).
- Размер (Size) — позволяет менять размер элемента по ширине и высоте.
Кликнув на название эффекта, вы перейдете к его настройкам. Здесь вы можете просмотреть заданные по умолчанию опции и установить желаемые параметры.
Для эффектов доступны следующие настройки:
Начало (Start) и Конец (End)
Настройка позволяет задать значение параметров эффекта в начале и в конце анимации.
Ключевые кадры эффекта (Effect keyframes)
Настройка позволяет установить продолжительность эффекта относительно общей длительности анимации. Для этого нужно задать начальную и конечную точки эффекта в процентах от начала анимации.
Пример: начальная точка 0%, конечная точка 50% — эффект будет работать от начала до середины всей анимации.
Настройку удобно использовать при добавлении нескольких эффектов — для разграничения их по времени выполнения.
Если добавить два одинаковых эффекта (например, Поворот), то точка начала второго эффекта будет автоматически привязана к точке окончания первого. Это позволяет выполнять эффекты последовательно. Например, первый эффект будет работать от начала до 30% всей анимации, а второй — от 30% до ее окончания.
Интерполяция (Easing)
Настройка позволяет задать паттерн ускорения и замедления эффекта на всем протяжении анимации, чтобы улучшить ее восприятие.
Добавленный эффект можно удалить на любом разрешении, нажав на три точки и выбрав соответствующее действие. При этом он будет удален на всех разрешениях. Если вы не хотите воспроизводить эффект на выбранном разрешении, его можно скрыть кликом на значок глаза справа от названия.
Здесь вы можете отключить анимацию на различных брейкпоинтах. По умолчанию анимация включается на все разрешения.
Настройки наследуются от базового разрешения. Например, если отключить анимацию на планшете, то она будет работать только на компьютере, мобильные брейкпоинты будут отключены.
Вы можете включить или отключить воспроизведение анимации для каждого устройства, переведя свитчер в соответствующее положение.
