Дизайн и стилизация

Анимации

8min

Для того чтобы сделать сайт более запоминающимся — привлечь внимание к определённому блоку или просто увеличить время посетителя на сайте, можно использовать различные анимации. Благодаря тому, что анимации в Taptop реализованы на основании библиотеки GSAP, вы можете создавать анимации любого уровня сложности.

Видео-урок

Смотрите подробный урок по созданию и адаптации анимации по триггеру «Появление на экране»:

Видео на YouTube
VK Видео


00:00 — Введение 00:19 — Добавляем анимации, варианты анимаций 11:56 — Адаптация анимаций 14:19 — Итоги



Как добавить анимацию

Для добавления анимации, в правой панели на вкладке «Анимации» нажмите на знак «+».

Document image


Далее выберите необходимый триггер из списка. Для настройки анимации в настоящее время доступны триггеры:

  • Появление на экране (Appear on screen)
  • Трансформация по скроллу (Scroll transform)
  • По клику (On click)
  • При наведении (On hover)
Document image


Как настроить анимацию

Для настройки параметров анимации нажмите на название триггера или на кнопку «Редактировать» в контекстном меню.

Document image


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

Пример настроек анимации для триггера «По клику»
Пример настроек анимации для триггера «По клику»


Подробную информацию о том, как настроить параметры для каждого триггера, читайте в статьях:

Как скопировать анимацию в другой элемент

Анимация настраивается для одного выбранного элемента. Если вы хотите настроить одинаковые эффекты разным элементам, необходимо скопировать созданную анимацию.

Для этого откройте контекстное меню, нажав на три точки справа от названия триггера или кликнув правой кнопкой мыши по названию триггера, и нажмите «Скопировать».

Document image


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

Document image


Копирование элемента с анимацией

Когда вы копируете элемент с анимацией, все настройки анимации переносятся на новый элемент.

Если триггерный элемент отличается от анимируемого (это возможно для анимаций по триггерам «Трансформация по скроллу», «По клику» и «При наведении»), то:

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

Как удалить анимацию

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

Document image


Также вы можете сбросить настройки анимации. Для этого наведите курсор на значение параметра, который вы хотите сбросить, зажмите "Shift" и нажмите кнопку "Сброс" (Reset).

Document image


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

Нельзя сбросить всю анимацию, а также эффект целиком.