Условия запуска

Element on screen: верхняя часть элемента коснулась линии триггера → старт анимации

Block on screen: верхняя часть блока коснулась линии триггера → старт анимации

On Scroll: верхняя часть элемента коснулась линии триггера → старт анимации, управляется скроллом

on Hover: старт при наведении

on Click: старт по клику

Start Trigger

Start Trigger — это линия в окне браузера.
Когда верх контейнера доходит до этой линии, анимация запускается.

on Window Top — старт, когда верх контейнера касается верха окна
on Window Center — старт, когда верх контейнера касается центра окна
on Window Bottom — старт, когда верх контейнера касается низа окна

Trigger Offset

Cдвиг точки запуска анимации относительно выбранного Start Trigger.

У тебя есть:
верх контейнера элемента
линия триггера (Top / Center / Bottom)

👉 Offset просто двигает эту линию вверх или вниз.

Главное правило
offset > 0 (плюс) → анимация начнётся раньше
offset < 0 (минус) → анимация начнётся позже

Loop

Loop — зацикленная анимация.

No Reverse — анимация не проигрывается назад,
она каждый раз запускается заново только вперёд.

Loop with Reverse — зацикливание с обратным движением.


Loop with Reverse: 0 → 100 → 0 → 100 → 0
(туда-обратно)

Loop (обычный): 0 → 100 → 0 → 100
(сброс и снова)

No Reverse: 0 → 100
(остался)
→ потом при новом запуске снова 0 → 100

Свойства анимации

Duration — длительность анимации
(сколько секунд она длится)

Move — движение элемента
(куда он смещается относительно начальной позиции)

Scale — размер
(увеличивается или уменьшается)

Opacity — прозрачность
(от 0 — невидим до 1 — полностью видим)

Rotate — поворот
(на сколько градусов поворачивается)

Easing — характер движения

Delay — задержка перед стартом

Easing

Linear — равномерно
easeIn — сначала медленно
easeOut — в конце замедляется
easeInOut — плавно в начале и в конце
bounce — с отскоком

Условия запуска

Это когда анимация зависит от положения всего блока, а не отдельного элемента.

Tilda смотрит на:
верхнюю границу всего Zero Block
И как только она доходит до линии триггера →
запускается анимация.

Block on screen — это когда весь экран работает как одна сцена.
Неважно, где внутри находятся элементы — старт у них общий.

Block on screen = один триггер на весь блок.

Условия запуска

Анимация зависит от конкретного элемента.

Tilda смотрит на:
верхнюю границу контейнера элемента
И как только она доходит до линии триггера →
запускается анимация.

Element on screen = каждый элемент со своим триггером.

Условия запуска

Анимация зависит от скролла.

Tilda смотрит на:
верхнюю границу контейнера элемента
И как только она доходит до линии триггера →
запускается анимация.

Element on screen = каждый элемент со своим триггером.

Условия запуска

Анимация зависит от скролла.

Tilda смотрит на:
верхнюю границу контейнера элемента
И как только она доходит до линии триггера →
запускается анимация.

Element on screen = каждый элемент со своим триггером.

Доп

Упростить — объединить в группу. (Object!)

Комбинировать с автолейаутом + Overflow: Hidden.
При 100% высоты экрана – у АЛ не выставить привязки. По умолчанию Left Top.

Добавить плавный скролл.

Пример 5

Плавность корректируем разницей между дистанцией скролла и смещения.

Добавляем 2 объекту доп Trigger Offset.

Пример 6

Два варианта — базовый Параллакс, либо SBS.

Если скорость указана меньше, чем 100%, то элемент движется медленнее скролла страницы, если скорость больше 100% — то быстрее.

Пример 7

Горизонтальный скролл.

Проще объединить в группу.

При верхней фиксации дать 100-120px постоять, чтобы не было рывков.

Увеличиваем высоту блока на длину анимации, либо добавляем пустой блок ниже.

Контролируем скорость анимации разницей между дистанцией и смещением.

Пример 8

Горизонтальный скролл.

Проще объединить в группу.

При верхней фиксации дать 100-120px постоять, чтобы не было рывков.

Увеличиваем высоту блока на длину анимации, либо добавляем пустой блок ниже.

Контролируем скорость анимации разницей между дистанцией и смещением.

Основное

1) Одну и ту же анимацию можно реализовать несколькими способами.

2) Нет идеальных формул, контролируем на опубликованной странице.

3) В блоке, где есть фиксация, выставляем Overflow: Visible

4) Задаем «жизнь» анимации через Easing.

5) Уделяем больше внимания микро-анимациям.