Получить консультацию

Кратко о видео

В уроке детально разобрана механика скролл-анимаций: триггерный элемент, метки start/end с настройкой границ вьюпорта, сглаживание движения, ключевые кадры для нескольких этапов анимации, несколько эффектов одновременно на одном элементе. В конце — три практических примера: эффект глубины из двух изображений с разной скоростью, движущиеся карточки, анимированный 3D-элемент. Анимация по скроллу в Taptop — это трансформация элемента в зависимости от прогресса скролла. Метки start и end определяют, в какой момент начинается и заканчивается эффект. Сглаживание убирает «дёргание» при быстром скролле. Несколько эффектов на одном элементе задаются одновременно в одной анимации. Урок продвинутый — для тех, кто уже работает с базовыми анимациями Taptop и хочет реализовать кинетические эффекты. Понимание абсолютного позиционирования нужно для примеров с наложением изображений.

Как настроить анимацию по скроллу в Taptop

Хочется эффект, когда элемент трансформируется при прокрутке страницы. Видел такое на современных сайтах. Как реализовать в Taptop? Где задавать начало и конец анимации?

Анимация по скроллу в Taptop — трансформация элемента в зависимости от позиции скролла. Строится на метках: start — когда начинается, end — когда заканчивается. Ключевые кадры позволяют делать последовательные трансформации. Для тех, кто уже умеет анимировать в Taptop. После просмотра создаёшь parallax и scroll-driven анимации.

Тайминги видео

00:00 — Трансформация по скроллу: как добавить 02:30 — Триггерный элемент и метки start/end 05:00 — Границы вьюпорта: scroller start и scroller end 07:30 — Сглаживание: как убрать рваность 09:00 — Эффекты: непрозрачность, движение, масштабирование, поворот 13:00 — Ключевые кадры: несколько эффектов в одной анимации 16:00 — Адаптив: отключение и изменение анимации по брейкпоинтам 18:00 — Практика: эффект глубины из двух изображений 21:00 — Практика: карточки, движущиеся при скролле 24:30 — Практика: 3D-элемент с поворотом по скроллу