МОДУЛЬ 6
Анимация
После того как все блоки собраны можно на отдельные элементы применить анимацию.
В каждом блоке делается отдельно: НАСТРОЙКИ - АНИМАЦИЯ
Картинки: нет/прозрачность/снизу/сверху/справа/слева/увеличение
Заголовки или текст: нет/прозрачность/снизу/сверху/справа/слева/увеличение
Кнопка: те же возможности плюс можно сделать эффекты на кнопке:
Flash, Ripple, Light
Анимация в стандартных блоках
АНИМАЦИЯ ЦИФР
Раздел "Преимущества", блоки FR402, 403, 405, 501
Настройки - Анимация - Анимация цифры

Пример 1
Блок FR402
$2000
Course fee
7 experts
To deliver lectures and masterclasses
30 persons
Average number of people in a group
9 days
Course duration (one day off included)
Пример 2
Блок FR403
$2000
Course fee
7
Directions of the learning program
30
Average number of people in a group
Пример 3
Блок FR405
45%
SKETCH
1 year
100%
ADOBE ILLUSTRATOR
3 years
65%
MOBILE UI
2 years
Пример 4
Блок FR501
9
Number of tutors helping students
to improve their English
1 538
Students have already joined us to study English by Skype
7.5
Our students' average IELTS scores over the past three years
В Zero Block выбираем требуемый элемент где необходимо сделать анимацию.
Setting - Basic Animation (почти в самом внизу экрана)

ANIMATION:
None (нет анимации)
Fade in (проявление)
Fade in up (сверху)
Fade in Down (снизу)
Fade in Left (слева)
Fade in Right (справа)
Zoom in (увеличение)
Scale (скорость из какой точки появляется)

DURATION (продолжительность в секундах)
DISTANCE (Дистанция/расстояние на которое переместится элемент)
DELAY (Задержка/пауза, чтобы элемент появился позже)
TIGGER OFFER (Через сколько пикселей элемент проявится на экране)

Test (Просмотр анимации): Play Element/Play All

PARALLAX - Эффект Паралакса при скроле:
нет
scroll (можно задать расстояние и элемент будет перемещаться при скроле);
mouse (будет двигаться по щелчку мыши)

FIXING (Фиксация на сайте отдельного элемента):
NONE (нет)
On Window Top (вверх)
On Window Center (центр)
On Window Botton (вниз)
Выставлять по Windows-контейнеру
Например, кнопка всегда будет наверху экрана.
Следить за дистанцией, как будет двигаться.
Если выставить Distance, например 3000 пикселей, то может в рамках одного блока наезжать на другие блоки.
Также через данную функцию можно сделать, чтобы фото/картинки не двигались, а при скроле двигался один текст.
Базовая анимация в Zero Block
None (нет анимации)
Fade in (проявление)
Fade in up (сверху)
Fade in Left (слева)
Fade in Down (снизу)
Fade in Right (справа)
Zoom in (увеличение)
BASIC ANIMATION
Skroll
PARALLAX
Mouse
FIXING (Фиксация на сайте отдельного элемента)
Выставлять по Windows-контейнеру
РАБОТАЕТ ТОЛЬКО ОДНА АНИМАЦИЯ!
ЛИБО БАЗОВАЯ ЛИБО ПОШАГОВАЯ!

В Zero Block выбираем требуемый элемент где необходимо сделать анимацию.
Setting - Step By Step Animation (в самом низу экрана)

ADD (добавить)
Event (выбрать):
None (нет анимации)
Element on Screen
Block in Screen
On Skroll
On Hover
On Click

Рассмотрим подробнее:
1. Element on Screen

Start Trigger: on Window Top/on Window Center/on Window Botton

Trigger Offset:
Loop:

Steps (шаги)
Steps1 - Add step

Чтобы задать анимацию перемещаем мышью куда должен переместиться 1 элемент или же выставляем вручную в настройках.

OPACITY (прозрачность)
ROTATE (развернуть элемент)

Выстраиваем нужное количество шагов (Step 1, Step 2, Step 3..)

ВАЖНО! В каждом отдельном шаге - 1 изменение 1 элемента.

Test (Просмотр анимации): Play Element/Play All

Для того, чтобы анимация продолжалась бесконечно, то необходимо - ЗАЦИКЛИТЬ (LOOP), т.е. например было уже создано 4 шага, то создаем шаг 5 и убираем по нему все настройки и добавляем LOOP.
Анимация будет продолжаться по кругу до этого шага.
Для разных элементов свои отдельные шаги!
Пошаговая анимация в Zero Block
(STEP BY STEP)
1. Добавляем шейп (через оранжевый плюсик ADD Shape)
2. Выделить шейп и перейти в настройки (Settings)
3. Выбрать Step-By-Step (почти в самом низу) - ADD
4. Event - Element on Screen
5. Steps +Add step
6. Выстраиваем сценарий по шагам, как будет проходить анимация:
Step5: LOOP (выбрать наверху)
Duration:0
Move X: 0 Y:0
Scale X,Y:100
Opacity: 100
Rotate: 0
Easing: Linear
Delay: 0
Step1:
Duration:1
Move X: -344; Y:15
Scale X,Y:100
Opacity: 100
Rotate: 0
Easing: Linear
Delay: 0
Step2:
Duration:1
Move X: -338; Y:-305
Scale X,Y:100
Opacity: 35
Rotate: 0
Easing: Linear
Delay: 0
Step3:
Duration:1
Move X: -99; Y:-306
Scale X,Y:100
Opacity: 95
Rotate: 0
Easing: Linear
Delay: 0
Step4:
Duration:1
Move X: -95; Y:-59
Scale X,Y:100
Opacity: 95
Rotate: 0
Easing: Linear
Delay: 0
Движение элемента по заданному периметру
Zero block
Как задать чтобы крутился 1 элемент вокруг своей оси
ELEMENT ON SCREEN
STEP 1
DURATION: 4
ROTATE: 360
Также можно сделать, чтобы элемент исчезал либо наоборот было ускорение: EASING (Liner/easeln/easeOut/easeInOut/elasticFin)
Good design is obvious. Great design is transparent
LET'S GO!
LET'S GO!
До Step By Step Animation есть бэкграунды по изменению цветов (перед базовой анимацией)
При наведении на кнопку будет изменяться цвет:
«BGColor On Hover - изменение цвета кнопки
Сolor on Hover - изменение текста кнопки
Эффект на кнопках
Эффект подпрыгивания кнопки
Step By Step Animation - ADD - Event - Hover - Step1
Duration: 0,2 (важно! много не указывать, т.к. может создаваться ненужное дергание); move Х = 0, Y = - 2
Достаточно создать 1 шаг, т.к. Тильда автоматически при опубликовании будет возвращать кнопку на место.
Все что делается по Hover делать быстрее, чтобы не возникло ошибок.
Т.е. длительность движения как можно меньше.
LET'S GO!
Когда необходимо чтобы при наведении мышки элемент сместился
Step By Step - ADD - Event - on Click
Step 1: переместить элемент в требуемое место
Curiosity about life in all its aspects, I think, is still the secret of great creative people.
Step By Step - ADD - Event - on Scroll
Start Trigger - оn Window Top/Bottom
Trigger Offset - Отступы сверху/снизу экрана
Если требуется, чтобы фото увеличилось, а после исчезло
Step1:
Dictance: 500
Move X: 0; Y:-500
Scale X,Y:120
Opacity: 0
Rotate: 0
Fix: 0
Delay: 0
Пример
Step By Step - ADD - Event - on Scroll
Добавить фото и текст, выделить фото
Zero block
Как сделать движение текста справа налево по скролу
Step By Step - ADD - Event - on Scroll
Start Trigger - оn Window Bottom
Step 1:
Distance: например 2000 (на протяжении этих пикселей будет перемещаться заданный элемент)
Мove X , Y (надпись проедет это расстояние по оси Х - горизонтально или по Y вертикально): Х = -2500
Save - Сlose - Опубликовать
р.s. Если надпись будет не ровно перемещаться, то выбрать Fix: Fixed
STEP BY STEP
Триггерная анимация
в Zero Block
TRIGGER — ЭТО ТОЧКА НАЧАЛА АНИМАЦИИ
1. Выбрать элемент, который будет изменяться/появляться.
Step-By-Step Animation - ADD - Event - on Hover
2. Тrigger - ADD Тrigger
(Выбрать элемент на который будет наведение мышкой, можно выбрать несколько элементов).
3. Установить последовательные шаги изменения анимации, например:
Steps - Start - Add step
Step 1: Duration - 0; Opacity - 0.
Step 2: Duration - 0,1; Opacity - 100.

4. Save - Опубликовать
1
2
Аналогично можно сделать при клике мышки:
- Trigger — текст
- Event — Click
- Step 1 — Duration 0; Opacity 0
- Step 2 — Duration 0.1; Opacity 100
Trigger
Создать Заголовок и 1 элемент и на него установить анимацию:
- Event — Click
- Trigger — Заголовок
- Step 1 — Duration 0.1;
Move Y -100px
- Step 2 — Duration 0.1; Move Y - 0
Создать остальные копии элементов и начиная со второй формы в 1 шаг добавить:
Delay 0,2 / 0,4 / 0,6 / 0,8 / 1 / 1.2
Триггерная анимация работает только по Hover или Click
Последовательная анимация
Trigger
Trigger
The work you do while you procrastinate is probably the work you should be doing for the rest of your life.
Подключение анимации на мобильных и планшетных
устройствах
В стандартных блоках подключается автоматически на кнопки.
В Zero-блоках каждый отдельный элемент необходимо подключить вручную.
Переходим в просмотр мобильной версии, выбираем конкретный элемент:
Settings - Mobile Animation - SWITCH ON
Еще больше настроек по анимации можно найти на платформе Tilda
Учебник по анимации
Триггерная анимация
ЗАДАНИЕ 6
1
На свой лендинг добавить анимацию
2
Прислать разработанный лендинг в WhatsApp/Telegram