TimeLine - Upline GSAP Animations

Цепочки анимаций

Одна из интересных особенностей текущей версии компонента это возможность объединять анимации в цепочки. Т.е. если вы укажите для 2х анимируемых элементов одно название временной шкалы. То они будут размещены в одной временной шкале друг за другом и начнут анимироваться последовательно 1 за другим.

Порядок анимации зависит от того в каком порядке расположены ваши UplineGSAPAnimation модули в коде. Выполнение начинается от тех что выше на странице к тем что ниже.

Если вы привязываете анимацию к элементу через класс. То вы можете создать несколько UplineGSAPAnimation в рамках одно таймлайна и привязанных к одному классу.

Анимация выше сделана с помощью 2х модулей UplineGSAPAnimation оба привязаны к классу .crtl31. 

Доступные опции

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

Статус

Данные переключатель включает привязку к временной шкале, название которой вы укажете. Если вы не внесете название шкалы, то будет создана временная шкала по умолчанию. Все элементы без названия временной шкалы попадают на временную шкалу по умолчанию.

Timeline Name

Имя временной шкалы. Указывайте одинаковое имя для элементов которые должны быть в одной временной шкале.

Задержка (Delay)

Задержка до старта анимации записанной во временную шкалу.

Повторение анимации (Repeat)

Укажите количество повторений анимации. Для бесконечной анимации -1.

Эффект YOYO

Этот эффект делает так что анимация проигрывается до конца, а потом делает все тоже самое в обратном направлении.

Значения по умолчанию (defaults)

Можно указать значения по умолчанию для продолжительности анимации и характера анимации.

Примеры на стандартных блоках Creatium

Номер секции #363

Номер секции #364