Анимации
Для того чтобы сделать сайт более запоминающимся — привлечь внимание к определённому блоку или просто увеличить время посетителя на сайте, можно использовать различные анимации. Благодаря тому, что анимации в Taptop реализованы на основании библиотеки GSAP, вы можете создавать анимации любого уровня сложности.
Видео: Как сделать анимацию в Taptop
- YouTube
- RuTube
- VK Video
- Vimeo
Как добавить анимацию
Для добавления анимации, в правой панели на вкладке «Анимации» нажмите на знак«+».
Далее выберите необходимый триггер из списка. Для настройки анимации в настоящее время доступны триггеры:
Появление на экране (Appear on screen)
Трансформация по скроллу (Scroll transform)
По клику (On click)
При наведении (On hover)
Как настроить анимацию
Для настройки параметров анимации нажмите на название триггера или на кнопку «Редактировать» в контекстном меню.
Далее откроются параметры анимации — они отличаются для разных триггеров.
Пример настроек анимации для триггера «По клику»
Как скопировать анимацию в другой элемент
Анимация настраивается для одного выбранного элемента. Если вы хотите настроить одинаковые эффекты разным элементам, необходимо скопировать созданную анимацию.
Для этого откройте контекстное меню, нажав на три точки справа от названия триггера или кликнув правой кнопкой мыши по названию триггера, и нажмите «Скопировать» .
Чтобы добавить скопированную анимацию, выберите нужный элемент на холсте или в слоях, перейдите на вкладку «Анимации» и кликните на «+». Далее нажмите «Вставить анимацию»
Копирование элемента с анимацией
Когда вы копируете элемент с анимацией, все настройки анимации переносятся на новый элемент.
Если триггерный элемент отличается от анимируемого (это возможно для анимаций по триггерам «Трансформация по скроллу», «По клику» и «При наведении»), то:
Если вы копируете анимируемый элемент на ту же страницу — все настройки анимации сохранятся, и она будет работать на новом элементе.
Если вы копируете анимируемый элемент на другую страницу без триггерного элемента — анимация на новом элементе не будет работать. Чтобы анимация заработала, вам нужно будет выбрать новый триггерный элемент.
Если вы копируете анимированный блок с помощью компонента на другую страницу — триггер сместится на сам анимируемый элемент.
Как удалить анимацию
Добавленный триггер можно удалить, выбрав соответствующее действие в контекстном меню, или отключить, переведя свитчер влево.
Также вы можете сбросить настройки анимации. Для этого наведите курсор на значение параметра, который вы хотите сбросить, зажмите "Shift" и нажмите кнопку "Сброс" (Reset).
Таким образом, вы можете сбросить параметр в настройках анимации до его значения по умолчанию или до значения, которое было наследовано с другого разрешения.