Анимация в Zero-блоке
Step-by-step анимация по скроллу и появлению
I. Старт анимации. Условие запуска.
➊ Block on screen
Блок на экране
Запускается, когда верх блока коснулся линии триггера.
Tilda смотрит на:
верхнюю границу всего Zero Block
И как только она доходит до линии триггера →
запускается анимация.
Block on screen — это когда весь экран работает как одна сцена.
Неважно, где внутри находятся элементы — старт у них общий.
Block on screen = один триггер на весь блок.
Tilda смотрит на:
верхнюю границу всего Zero Block
И как только она доходит до линии триггера →
запускается анимация.
Block on screen — это когда весь экран работает как одна сцена.
Неважно, где внутри находятся элементы — старт у них общий.
Block on screen = один триггер на весь блок.
➋ Element on screen
Элемент на экране
Запускается, когда верхняя часть контейнера элемента коснулась линии триггера.
Tilda смотрит на:
верхнюю границу контейнера элемента
И как только она доходит до линии триггера →
запускается анимация.
Element on screen = каждый элемент со своим триггером.
Tilda смотрит на:
верхнюю границу контейнера элемента
И как только она доходит до линии триггера →
запускается анимация.
Element on screen = каждый элемент со своим триггером.
➌ on Scroll
Анимация по скроллу
Запускается, когда верхняя часть контейнера элемента коснулась линии триггера.
Анимация зависит от скролла.
Tilda смотрит на:
верхнюю границу контейнера элемента
И как только она доходит до линии триггера →
запускается анимация.
Element on screen = каждый элемент со своим триггером
Анимация зависит от скролла.
Tilda смотрит на:
верхнюю границу контейнера элемента
И как только она доходит до линии триггера →
запускается анимация.
Element on screen = каждый элемент со своим триггером
➍ on Hover
По ховеру
Запускается, когда пользователь навел курсор на элемент-триггер.
➎ on Click
По клику
Запускается, когда пользователь нажал на элемент-триггер.
II. Настройки действия
Свойства анимации
Duration — длительность анимации
(сколько секунд она длится)
Move — движение элемента
(куда он смещается относительно начальной позиции)
Scale — размер
(увеличивается или уменьшается)
Opacity — прозрачность
(от 0 — невидим до 1 — полностью видим)
Rotate — поворот
(на сколько градусов поворачивается)
Easing — характер движения
Delay — задержка перед стартом
(сколько секунд она длится)
Move — движение элемента
(куда он смещается относительно начальной позиции)
Scale — размер
(увеличивается или уменьшается)
Opacity — прозрачность
(от 0 — невидим до 1 — полностью видим)
Rotate — поворот
(на сколько градусов поворачивается)
Easing — характер движения
Delay — задержка перед стартом
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
No Reverse — анимация не проигрывается назад,
она каждый раз запускается заново только вперёд.
Loop with Reverse — зацикливание с обратным движением.
Loop with Reverse: 0 → 100 → 0 → 100 → 0
(туда-обратно)
Loop (обычный): 0 → 100 → 0 → 100
(сброс и снова)
No Reverse: 0 → 100
(остался)
→ потом при новом запуске снова 0 → 100
Easing
Linear — равномерно
easeIn — сначала медленно
easeOut — в конце замедляется
easeInOut — плавно в начале и в конце
bounce — с отскоком
easeIn — сначала медленно
easeOut — в конце замедляется
easeInOut — плавно в начале и в конце
bounce — с отскоком
III. Точка запуска
➊ Start trigger
Линия триггера
Start Trigger — это линия в окне браузера.
Когда верх контейнера доходит до этой линии, анимация запускается.
on Window Top — старт, когда верх контейнера касается верха окна
on Window Center — старт, когда верх контейнера касается центра окна
on Window Bottom — старт, когда верх контейнера касается низа окна
Когда верх контейнера доходит до этой линии, анимация запускается.
on Window Top — старт, когда верх контейнера касается верха окна
on Window Center — старт, когда верх контейнера касается центра окна
on Window Bottom — старт, когда верх контейнера касается низа окна
➋ Trigger offset
Смещение линии триггера
Cдвиг точки запуска анимации относительно выбранного Start Trigger.
У тебя есть:
верх контейнера элемента
линия триггера (Top / Center / Bottom)
👉 Offset просто двигает эту линию вверх или вниз.
Главное правило
offset > 0 (плюс) → анимация начнётся раньше
offset < 0 (минус) → анимация начнётся позже
У тебя есть:
верх контейнера элемента
линия триггера (Top / Center / Bottom)
👉 Offset просто двигает эту линию вверх или вниз.
Главное правило
offset > 0 (плюс) → анимация начнётся раньше
offset < 0 (минус) → анимация начнётся позже
IV. Примеры
➊ Block on screen
Блок на экране
100 px
200 px
300 px
400 px
500 px
600 px
700 px
800 px
Линия запуска: on Window Top
Сдвиг линии: 0px
Шаг 1: 0% непрозрачности.
Шаг 2: 100% непрозрачности. Время 3 секунды
Сдвиг линии: 0px
Шаг 1: 0% непрозрачности.
Шаг 2: 100% непрозрачности. Время 3 секунды
Пример 1
Block on screen
➋ Element on screen
Элемент на экране
100 px
200 px
300 px
400 px
500 px
600 px
700 px
800 px
Линия запуска: on Window Top
Сдвиг линии: 0px
Шаг 1: 0% непрозрачности.
Шаг 2: 100% непрозрачности. Время 2 секунды
Сдвиг линии: 0px
Шаг 1: 0% непрозрачности.
Шаг 2: 100% непрозрачности. Время 2 секунды
Пример 2
Element on screen
➌ on Scroll
Анимация по скроллу
100 px
200 px
300 px
Линия центра
400 px
500 px
600 px
700 px
800 px
Линия запуска: on Window Center
Сдвиг линии: -115px
Шаг 1: 0% непрозрачности.
Шаг 2: 100% непрозрачности. Дистанция 1px
Сдвиг линии: -115px
Шаг 1: 0% непрозрачности.
Шаг 2: 100% непрозрачности. Дистанция 1px
Пример 3
on Scroll
➍ on Scroll and Fixed
Анимация по скроллу с фиксацией
Условия запуска
Анимация зависит от скролла.
Tilda смотрит на:
верхнюю границу контейнера элемента
И как только она доходит до линии триггера →
запускается анимация.
Element on screen = каждый элемент со своим триггером.
Tilda смотрит на:
верхнюю границу контейнера элемента
И как только она доходит до линии триггера →
запускается анимация.
Element on screen = каждый элемент со своим триггером.
Доп
Упростить — объединить в группу. (Object!)
Комбинировать с автолейаутом + Overflow: Hidden.
При 100% высоты экрана – у АЛ не выставить привязки. По умолчанию Left Top.
Добавить плавный скролл.
Комбинировать с автолейаутом + Overflow: Hidden.
При 100% высоты экрана – у АЛ не выставить привязки. По умолчанию Left Top.
Добавить плавный скролл.
100 px
200 px
300 px
400 px
500 px
600 px
700 px
800 px
Start trigger: Top. Trigger offset: Difference. Distance 300px.
Шаг 1: Opacity 100% + Fixed
Шаг 1: Opacity 100% + Fixed
Пример 4
on Scroll and Fixed
➎ on Scroll and Fixed
Горизонтальный скролл
Проще объединить в группу.
При верхней фиксации дать 100-120px постоять, чтобы не было рывков.
Увеличиваем высоту блока на длину анимации, либо добавляем пустой блок ниже.
Контролируем скорость анимации разницей между дистанцией и смещением.
При верхней фиксации дать 100-120px постоять, чтобы не было рывков.
Увеличиваем высоту блока на длину анимации, либо добавляем пустой блок ниже.
Контролируем скорость анимации разницей между дистанцией и смещением.
Your content
V. Разбор анимаций
➊ Mamaenko studio
mamaenko.com
Пример 7
Горизонтальный скролл.
Проще объединить в группу.
При верхней фиксации дать 100-120px постоять, чтобы не было рывков.
Увеличиваем высоту блока на длину анимации, либо добавляем пустой блок ниже.
Контролируем скорость анимации разницей между дистанцией и смещением.
Проще объединить в группу.
При верхней фиксации дать 100-120px постоять, чтобы не было рывков.
Увеличиваем высоту блока на длину анимации, либо добавляем пустой блок ниже.
Контролируем скорость анимации разницей между дистанцией и смещением.
[ избранные проекты ]
Продуманное, лёгкое и функциональное пространство для семьи из трёх человек.
втб 166м²
басманный 120 м²
арбат 220м²
Этот проект — про баланс между чёткой геометрией и округлыми линиями. Радиусные стены и детали мебели задают мягкую архитектуру пространства и формируют его плавный ритм.
Интерьер про нюансы, полутона и продуманный ритм. Здесь тёплое дерево сочетается с фактурным мрамором, латунными акцентами и сложными текстурами.
Почти как бумага. Только удобнее.
Если вы устали писать по глянцевому экрану — разницу почувствуете с первой строки.
Тактильность
Матовая поверхность с лёгким сопротивлением создаёт ощущение письма на настоящей бумаге. Стилус не скользит по дисплею — трение текстур на 100% имитирует контакт реального карандаша и листа.
Быстрый отклик
Почти полностью отсутствует задержка между проведением линии и появлением электронных чернил. Минимальный параллакс, незаметный для глаза.
Матовый экран
Экран не светится и не бликует. Отсутствует синее излучение, что позволяет долго читать или писать без нагрузки на глаза.
7. Итог
Основное
1) Одну и ту же анимацию можно реализовать несколькими способами.
2) Нет идеальных формул, контролируем на опубликованной странице.
3) В блоке, где есть фиксация, выставляем Overflow: Visible
4) Задаем «жизнь» анимации через Easing.
5) Уделяем больше внимания микро-анимациям.
2) Нет идеальных формул, контролируем на опубликованной странице.
3) В блоке, где есть фиксация, выставляем Overflow: Visible
4) Задаем «жизнь» анимации через Easing.
5) Уделяем больше внимания микро-анимациям.
Нажимая на кнопку, вы соглашаетесь с политикой конфиденциальности
Оставьте пожалуйста контактные данные, и я свяжусь с вами в ближайшее время. Обсудим детали, стоимость и план работы
Связь со мной
