Элемент для триггера
При повторном клике
Число повторений

В этой статье мы расскажем о настройках запуска анимации При клике.

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

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

Рассмотрим на примере. Если по умолчанию триггер это квадрат, то анимация квадрата запустится при клике на квадрат.

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

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

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

Проигрывать заново — после проигрывания анимация остается на последнем шаге. Но при повторном клике по элементу анимация возвращается в начальное положение и проигрывается повторно.

Ставить на паузу— при повторном клике анимация останавливается или запускается заново. 

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

Сбрасывать в начало — после проигрывания анимация остается на последнем шаге, при повторном клике элемент возвращается в изначальное положение. Для повторного запуска анимации нужно кликнуть еще раз.

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

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