Как сделать анимацию в тильде
Перейти к содержимому

Как сделать анимацию в тильде

  • автор:

Zero Block: пошаговая анимация

Посмотрите видеоурок о том, как работать с пошаговой анимацией в Zero Block или прочитайте подробную инструкцию ниже.

Внутри Zero Block есть два режима анимации:

1) Basic Animation — простая анимация. Это готовые, самые часто используемые эффекты, например, эффект появления (через прозрачность, снизу вверх, справа налево и т.д.), параллакс и фиксация. Их достаточно в 90% случаев.

2) Step-by-step Animation — пошаговая анимация. Позволяет реализовать яркие, креативные идеи по вашему сценарию.

Страница с примерами возможностей пошаговой анимации https://tilda.cc/ru/lp/step-by-step-animation/

Обзорная статья по основным возможностям
Статья о работе с контейнерами и созданию «резиновых» элементов
Cписок всех комбинаций для ускорения работы
Справка по простой анимации: фиксации, параллаксу и анимации появления
Справка по сложной триггерной анимации: настройка и примеры

Как автоматически импортировать макет из Figma в Zero Block

Определяем базовую структуру дизайна и ускоряем работу с макетом
Начало работы с пошаговой анимацией

Пошаговая анимация доступна в Zero Block — редакторе для профессиональных дизайнеров. Добавьте его на страницу из библиотеки блоков (в самом низу, после категории «Другое»). Или кликните на иконку Zero Block в меню быстрого добавления блоков внизу страницы.

Нажмите «Редактировать блок» в левом верхнем углу блока, чтобы перейти в режим редактирования.

Добавьте новый элемент, выделите его, откройте настройки, пролистайте до раздела Step by Step Animation и нажмите кнопку Add.

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

  • Element on Screen — анимация начинается при появлении элемента на экране;
  • Block on Screen — анимация начинается при появлении на экране всего текущего блока;
  • On Scroll — анимация запускается и продолжается во время скролла;
  • On Hover — анимация появляется при наведении на элемент;
  • On Click — анимация начинается при клике на элемент.

У начала анимации есть дополнительные опции Start Trigger, Loop и Trigger Offset.

  • Start Trigger — это то, к чему будет привязана анимация или что будет являться ее триггером. Есть выбор из трех областей — верхней границы (On Window Top), центра экрана (On Window Center) и нижней границы (On Window Bottom);
  • Trigger Offset — это смещение начала анимации объекта относительно выбранного Window Top / Window Center / Window Bottom;
  • Loop — это опция зацикливания анимации.

C помощью опции Test и кнопок Play Element / Play All можно проиграть анимацию этого элемента или всех элементов в блоке.

Добавление шагов анимации

Первый шаг, задан по умолчанию — это Start. Далее нужно добавлять шаги и на каждом шаге менять свойства элемента. Так элемент будет меняться.

Чтобы добавить шаг, нажмите на кнопку Add Step.

Между шагами можно переключаться. При этом синяя обводка элемента означает стандартное состояние, зеленая — редактирование шага.

Чтобы изменить начальное состояние объекта, например, чтобы объект в начале был невидим (значение Opacity равное нулю), нужно добавить первый шаг с этим состоянием и длиной (Duration) в 0 секунд.

У каждого шага есть набор свойств: Duration, Move, Scale, Opacity, Rotate, Easing и Delay.

Duration — длина анимации в секундах;
Move — координаты, куда передвигается элемент относительно начального расположения. Их можно задать как значениями, так и передвинуть элемент;
Scale — процент увеличения или уменьшения элемента к концу этого шага;
Opacity — значение прозрачности элемента к концу шага;
Rotate — поворот элемента в градусах к концу шага;
Easing — выбор эффекта выполнения анимации: Linear — это линейное выполнение анимации, easeIn, easeOut, easeInOut — это замедление в начале, конце или в начале и конце анимации, bounceFin — это небольшой отскок элемента в конце анимации;
Delay — задержка перед выполнением анимации.

Как сделать анимацию в тильде

C пошаговой анимацией любому элементу страницы можно назначать последовательные шаги трансформаций и дать возможность пользователю взаимодействовать с элементами.

ВЫБЕРИТЕ СОБЫТИЕ НАЧАЛА АНИМАЦИИ
ПО СКРОЛЛУ
ПРИ НАВЕДЕНИИ НА ЭЛЕМЕНТ
ПРИ ПОЯВЛЕНИИ ЭЛЕМЕНТА
ДОБАВЬТЕ НОВЫЕ ШАГИ АНИМАЦИИ
ИЗМЕНЯЙТЕ СВОЙСТВА ЭЛЕМЕНТА ДЛЯ КАЖДОГО ШАГА
ДОБАВЬТЕ НОВЫЙ ЭЛЕМЕНТ В ZERO BLOCK
ПОЛОЖЕНИЕ ЭЛЕМЕНТА
СКОРОСТЬ ДВИЖЕНИЯ
РАЗМЕР ЭЛЕМЕНТА
УГОЛ ПОВОРОТА
ПРОЗРАЧНОСТЬ

ИЗМЕНЕНИЕ ТРАЕКТОРИИ ЭЛЕМЕНТОВ ПО СКРОЛЛУ
ПРИМЕРЫ ПОШАГОВОЙ АНИМАЦИИ
АНИМАЦИЯ ПРИ НАВЕДЕНИИ ИЛИ ПО КЛИКУ НА ОБЪЕКТ
БЕСКОНЕЧНАЯ БЕГУЩАЯ СТРОКА
ANIMATE YOUR TEXT
ANIMATE YOUR TEXT
ФИКСАЦИЯ ПОЛОЖЕНИЯ ЭЛЕМЕНТОВ ПРИ СКРОЛЛЕ

Among the myriad definitions of graphic design, one of the most illuminating is by the American designer and writer Jessica Helfand. According to Helfand, graphic design is a ‘visual language uniting harmony and balance, colour and light, scale and tension, form and content. But it is also an idiomatic language, a language of cues and puns and symbols and allusions, of cultural references and perceptual inferences that challenge both the intellect and the eye.

I like Helfand’s definition. Her first sentence is a conventional summary of graphic design; few would argue with it. But her second sentence throws a punch: it alludes to design’s expressive power and higher intent. Even as a recalcitrant teenager I sensed graphic design’s emotive potency. I didn’t even know there was such a thing as graphic design, but I lovingly copied lettering from album covers, magazines, cereal boxes and comic books. I didn’t copy other elements; only the lettering. I liked the way that particular letterforms gave words added meaning. I noticed that the same words in a different typeface were not necessarily as beguiling. Copying letterforms is a common enough occupation among bored teenagers — it seems to have a calming effect on to hormones: it was used memorably as a trope for disaffected youth by Geoff McFetridge in his title sequence for Sofia Coppola’s film The Virgin Suicides.

14 идей для простой, но яркой анимации в Тильде. Смотрите и забирайте на свои лендосы

Чтобы сделать лендинг интересней и кайфовей, можно использовать анимацию. Она привлечет внимание и поможет подсветить важные моменты. Главное — использовать ее с умом и не переусердствовать. В статье показываем примеры с лендингов нашей редакции и рассказываем, как легко сделать прикольные штуки, используя возможности Tilda.

Анимация не мастхэв, и большинство задач лендинга можно решить без нее. Но интерактивы — это не бесполезная красивость. Они помогают передать tone of voice бренда и задают правильное настроение. С помощью грамотной анимации можно улучшить метрики сайта — вовлеченность и глубину просмотров. А еще она помогает удерживать внимание пользователей, а бренды показывает технологичными и современными.

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

Что можно сделать в Tilda

В Tilda есть три вида анимации: базовая, step-by-step animation и через код. Мы в редакции можем сделать разную анимацию, но зачастую удобнее и проще всего добавить на сайт step-by-step — пошаговую анимацию. Например, с ее помощью можно сделать бегущую строку из иллюстраций, движение элементов по скроллу или зацикливание текста.

Все типы пошаговой анимации создаем по одной схеме:

  1. Добавляем элементы в Zero Block — тексты или иллюстрации.
  2. Выбираем событие для этих элементов — по скроллу, клику, при наведении или появлении.
  3. Создаем шаги анимации — количество зависит от сложности интерактива.
  4. Изменяем свойства элементов для каждого шага — положение, размер, скорость, прозрачность, угол поворота.
  5. Проигрываем и проверяем анимацию. Восхищаемся, как классно получилось.

Наши дизайнеры могут сделать пошаговую анимацию за один час (это без времени на придумывание идеи и подготовку элементов — такая работа занимает несколько дней). Немного простых действий — и на лендинге появятся интересные фишки, которые будут привлекать и удерживать внимание клиентов. И всё это без дорогой разработки кода и мучений программистов. Посмотрите на наши примеры и убедитесь сами, как интерактивы оживляют страницы.

Бесконечная бегущая строка

Это когда текст или иллюстрация в виде строки непрерывно перемещаются по экрану. Такую анимацию можно применять для фотографий, текстов или любых других элементов.

В разделе «Карьера» на лендинге нашей редакции есть необычная анимация из зацикленной текстовой строки и элемента — рыбов, которые катают тираннозавра. Такой интерактив сразу же задает правильное настроение для кандидатов: у нас интересно, весело, и мы непрерывно создаем контент.

Текстовая строка и динозавр день и ночь перемещаются по экрану

Чтобы сделать такой интерактив, мы использовали анимацию step-by-step animation. Сначала создали элементы — написали текст и отрисовали динозавра. Затем сделали их дубли и установили событие «при появлении элемента». Потом зациклили анимацию с помощью настройки Loop, выставили длительность и длину.

Смена элементов по скроллу

При таком типе анимации иллюстрации на лендинге меняют вид при скролле. Их можно использовать, чтобы показать изменение объекта или обратить внимание пользователя на какие-то детали.

Например, на лендинге спецпроекта для Уральских авиалиний нам нужно было показать, что за формой бортпроводников скрываются настоящие супергерои. Чтобы реализовать идею, мы использовали анимацию по скроллу.

Сначала на сайте отображается стюардесса в форме авиакомпании, а при скроллинге у нее появляются атрибуты Чудо-женщины

Халк злится, потому что замерз, но стоит пролистать страницу вниз — и его успокоит стюардесса с теплым пледом

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

Вот еще один пример такой анимации на лендинге нашего практического курса по vc.ru. Здесь у акулы открывается чемодан с сертификатами.

Можно было просто добавить изображение сертификатов, но анимация лучше привлекает внимание к такой важной для учеников детали

Анимация по скроллу

Здесь во время скроллинга страницы меняется изображение. Анимацию можно применять для любых фигур и текста, чтобы привлечь внимание пользователей.

Для лендинга пивного конкурса наши дизайнеры придумали суперулетную штуку с космонавтом. Получилось круто. А главное — такая анимация действительно привлекла внимание. В конкурсе приняли участие 73 человека и получили классные призы.

Сначала на экране появляется космонавт, а когда начинаешь скроллить сайт, он крутится — и на его месте появляется бутылка, которую разбивает Брюс Ли

Чтобы создать такой интерактив, пришлось поднапрячься. Мы снова использовали step-by-step animation с событием «по скроллу». Потом добавили поэтапно все элементы — космонавта, вспышку, бутылку, Брюса. А к ним настроили разные эффекты — дистанцию, вращение, непрозрачность.

Движение элементов по скроллу

Это когда элементы при скроллинге двигаются вдоль экрана по горизонтали или вертикали. Также можно применять для совершенно любых элементов — на что хватит фантазии.

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

Космонавт при скроллинге перемещается по странице слева направо — в руках один из призов

Чтобы наш парашютист двигался, мы поставили его в левой части экрана и в настройках step-by-step выбрали событие «по скроллу». Затем задали дистанцию, и всё. Здесь главное — правильно рассчитать расстояние в пикселях, чтобы элемент успел дойти до края экрана.

На лендинге курса по IT по экрану бегает Рыбка — собирает призы и прыгает через препятствия, как в старых компьютерных играх

Появление предметов по скроллу

При таком виде анимации элементы на странице появляются поочередно по скроллу. Ее можно использовать для данных, которые лучше давать дозированно. Например, какую-нибудь громоздкую инструкцию разбить на смысловые блоки.

На лендинге креативного конкурса карточки с условиями одна за другой вылетают из принтера. Интерактив помогает пользователям легче воспринимать информацию, а необычная подача удерживает внимание.

Чтобы получить приз, важно выполнить все условия конкурса — ничего не упустить конкурсантам помогает удобное оформление

Чтобы сделать такую анимацию, в настройках step-by-step мы выбрали событие «по скроллу». Затем зафиксировали все элементы, которые не должны меняться при скролле, с помощью настройки FIX. А для листов бумаги настроили дистанцию и количество оборотов.

Анимация при наведении

Когда наводишь курсор на объект, у него появляются дополнительные элементы или он меняется. Интерактив можно применять, чтобы выделить элементы или если для текстовых блоков нужны разные тематические изображения.

Например, такой тип анимации мы использовали на странице «Карьера» нашей редакции.

Когда пользователь наводит мышкой на фото кого-то из команды, на нем появляются дополнительные прикольные детали

А для фанового редизайна сайта группы «КняZz» мы использовали анимацию при наведении, чтобы обыграть города, в которых будут проходить концерты.

Так, при наведении курсора на Москву появляется иллюстрация с летающей ведьмой над Кремлем

Чтобы сделать такой интерактив, мы выбрали в настройках step-by-step событие «по наведению». Затем создали два элемента и выставили дистанцию для изменения изображения.

Зацикливание анимации

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

Посмотрите, как на лендинге нашего вымышленного курса «Как мыть жопу» мы зациклили информационный текст вокруг стоимости. В этом разделе нет изображений и иллюстраций, а такая анимация добавляет динамики.

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

Чтобы сделать зацикленную анимацию, мы выделили элемент и в настройках step-by-step выбрали событие «при появлении элемента на экране». Затем зациклили с помощью функции Loop и задали параметры вращения.

Перетаскивание предметов

Интерактив, когда элементы на странице можно перетаскивать, сделать уже сложнее. Это не входит в шаблонные анимации редактора Tilda, и для каждого интерактива пишется свой код.

Мы в Рыбе используем огромное количество готовых решений Tilda, но, если нужно что-то необычное, заказываем у программистов уникальные коды. Например, как для этих интерактивов с чемоданом, карточками и котиком.

На сайт спецпроекта для Уральских авиалиний добавили чемодан, чтобы пользователи сами могли посмотреть, какие вещи бортпроводники берут с собой в рейс

Чтобы не занимать много места на экране, вынесли информацию с примером контента на карточки, которые можно двигать

А в разделе «Карьера» добавили вот такого милого злючку и плашки, которые можно побросать по странице, чтобы сбросить стресс. Попробуйте выпустить пар

Мы в Рыбе делаем лендинги и сайты с самой разной анимацией. Убедитесь сами и приходите, если хотите, чтобы мы придумали что-то и для вас.

АНИМАЦИЯ В ВЕБЕ

Из учебника вы узнаете о видах веб анимации, примерах и правилах ее использования. В каждой лекции есть практический видеоурок о том, как создать анимацию в редакторе Tilda.

АНИМАЦИЯ В ВЕБЕ

Используйте анимацию в меру. Важно, чтобы примененные эффекты не стали навязчивыми.
Анимируйте функциональные элементы: пункты меню, кнопки, плитки или активные ссылки.
Следите за качеством отображения анимации. Анимация на сайте не должна тормозить.
3 ПРАВИЛА ИСПОЛЬЗОВАНИЯ АНИМАЦИИ
Используйте анимацию в меру. Важно, чтобы примененные эффекты не стали навязчивыми
Анимируйте функциональные элементы: пункты меню, кнопки, плитки или активные ссылки
Следите за качеством отображения анимации. Анимация на сайте не должна тормозить.
3 ПРАВИЛА ИСПОЛЬЗОВАНИЯ АНИМАЦИИ

Расскажите друзьям об анимации и покажите ее на ярких примерах. Поделитесь проектом в социальных сетях.

Образовательный журнал платформы для создания сайтов Tilda Publishing.

Практические руководства по дизайну и маркетингу для цифровых проектов.

© Обухов Н.В., 2015-2024 Все права защищены. Перепечатка и цитирование материалов запрещены.

По всем вопросам пишите на team@tilda.ru

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *