Каталог
Исправляем баг с пошаговой анимацией
Описание
В этом видео я разберу один небольшой баг, который не раз портил жизнь мне и многим другим дизайнерам.
Речь пойдёт о пошаговой анимации (SBS), а именно о баге, связанном с позиционированием элементов и запуском анимации.
Разберём проблему на примере анимации в шапке сайта: почему при фиксации шапки и попытке анимировать её трансформацию при прокрутке, анимация сбрасывается после перезагрузки страницы или перестаёт реагировать на скролл.
Ну и в конце концов мы найдём решение и всё исправим шаг за шагом разберём, в чём причина бага, и настроим анимацию так, чтобы она работала стабильно при любых условиях: и при перезагрузке страницы, и при прокрутке.
Ну, а для тех, кто хочет больше анимаций предлагаю вашему вниманию Animation GSAP Edition.
Это пак из 30+ готовых эффектов: от текстовых до 3D-анимаций, созданных с использованием библиотеки GSAP и пошаговой анимации.
Речь пойдёт о пошаговой анимации (SBS), а именно о баге, связанном с позиционированием элементов и запуском анимации.
Разберём проблему на примере анимации в шапке сайта: почему при фиксации шапки и попытке анимировать её трансформацию при прокрутке, анимация сбрасывается после перезагрузки страницы или перестаёт реагировать на скролл.
Ну и в конце концов мы найдём решение и всё исправим шаг за шагом разберём, в чём причина бага, и настроим анимацию так, чтобы она работала стабильно при любых условиях: и при перезагрузке страницы, и при прокрутке.
Ну, а для тех, кто хочет больше анимаций предлагаю вашему вниманию Animation GSAP Edition.
Это пак из 30+ готовых эффектов: от текстовых до 3D-анимаций, созданных с использованием библиотеки GSAP и пошаговой анимации.
