БЛОГ ДМИТРИЯ РЫБАЛКА

Появление текста при скролле

Анимация

Добавление элементов

Расставьте текстовые блоки и добавьте над каждым текстом элемент Shape. Уменьшите непрозрачность Shape до 90%.

Настройка элементов

В пошаговой анимации поставьте Event (событие) — on Scroll (при скролле), Start Trigger (начало триггера анимации) — on Window Top (от верхнего края экрана), Trigger Offset (отступ, задержка) — 200 пикселей. В первом шаге при дистанции 10 пикселей установите смещение вниз на 90 пикселей, чтобы полупрозрачный шейп спустился ниже текстового блока.

Продублируйте настройки

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

Чтобы при смещении вниз шейпы не перекрывали нижние элементы, откройте слои (ctrl (command) + L) и разместить верхние элементы под нижними.

Готово!

Так же эта анимация будет хорошо смотреться на мобильных устройствах. Чтобы включить мобильную анимацию, зайдите в редактор любого мобильного экрана и в общих настройках в самом низу нажмите на кнопку Switch On (Animation).