Появление текста при скролле страницы сайта на Тильде

Текст появлятся при скролле страницы. Сделано через пошаговую анимацию.

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

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

Добавьте текстовые блоки и сверху над ними шейпы.

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

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

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

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

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

Добавьте пошаговую анимацию к каждому элементу.

Для ускорения работы, добавьте анимацию к первым элементам, а потом продублируйте их, чтобы сохранились настройки пошаговой анимации.

Готово!

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