- Главная страница ›
- Demo Upline GSAP Animations v1 ›
- Zero - Demo Upline GSAP Animations
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 и выше).
