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

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

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

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

В нашем примере анимированным элементом является синий квадрат, его линией пересечения выбран центр экрана.

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

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

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

Анимация запускается, когда элемент достигает верхнего края, центра или нижнего края. В режиме просмотра линия пересечения становится невидимой.

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

Например, у вас настроена линия пересечения в центре экрана. 
Если вы зададите отступ 20%, линия пересечения сместится на 20% вниз. 
Если вы зададите минусовое значение, например, --20%, то линия пересечения сместится на 20% вверх.

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

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

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

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

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

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

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

В примере ниже показываем варианты настройки повторения.

У анимации есть два направления проигрывания: 

Туда — проигрывание анимации от начального положения до последнего шага.

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