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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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