Zero Блоки -  Upline GSAP Animations

Анимация зероблоков

В версии 4.2 и выше есть возможность анимировать элементы Zero блоков.

Для анимации вам потребуется

Классы на элемент Zero блока

  • Добавьте Zero-секцию или Zero-блок на страницу.
  • Разместите картинку, фигуру или любой другой элемент.
  • Перейдите в настройки и элемента и укажите имя класса. Например мы указали класс shar-2 для нашего маленького воздушного шара.

Импортировать модуль Upline GSAP Animations

Импортируйте на страницу компонент Upline GSAP Animations. Инструкция установки доступна на странице компонента.

Настроить анимацию с привязкой по классу

В настройках Upline GSAP Animations переходите в раздел Что анимируем? И выбираем в нем "Сторонний класс". В появившееся поле вписываем наш класс shar-2.

Теперь все настройки анимации будут применяться к элементам у которых на странице класс shar-2. Важно понимать, что если вы укажете несколько классов shar-2, то анимированы будут все классы. Больше про анимацию объектов с одним классом можно узнать в демо про Управление стадиями (Stager).

Ниже пример анимации Zero блока

Секция ниже сделана на основе Zero блока с анимацией отдельных элементов.
Вы можете импортировать секцию к себе в проект по коду 354 (Доступно для версии 4.2 и выше).

Работает на Creatium