Какие сайты можно создавать на Webflow: анимации и готовые решения

Платформа для разработки сайтов Webflow привлекает многих не только скоростью разработки, но и возможностью реализовывать сложные дизайн-решения. Яндекс, Сбер, Самолет и многие другие российские компании давно обзавелись сайтами на Webflow. Давайте посмотрим, действительно ли Webflow так хорош.

Конструкторы сайтов — это сервисы, в которых можно собирать сайты без навыков программирования (ноу-код). Они работают по принципу визуального редактора. Разработчик создает блоки и заполняет их контентом, в то время как код пишется автоматически. Среди самых популярных конструкторов в России — Tilda, Wix, Readymag, Framer, Elementor и Webflow. При этом Webflow сильно выделяется на фоне остальных.

Направление ноу-код разработки стало набирать популярность несколько лет назад в силу того, что такие решения гораздо дешевле и удобнее классической разработки.

Если вам интересна тема ноу-код разработки сайтов и создание сайтов на Webflow, приглашаю вас в наш канал. А попробовать сверстать свой первый сайт на Webflow можно по нашим урокам на YouTube или на бесплатном курсе с поддержкой менторов.

Самое главное отличие в том, что Webflow — это конструктор продвинутого уровня. В нем можно работать как и без знания кода, так и применяя навыки программирования. Все зависит от сложности решений, которые вы хотите реализовать. С помощью Webflow можно создавать лендинги, корпоративные сайты, интернет-магазины, и даже SaaS-продукты и LMS-платформы. А еще есть много возможностей для интеграций с внешними сервисами.

В чем отличие Webflow от других сервисов:

• почти нет никаких ограничений в дизайне и анимациях, нет необходимости в костылях;
• из всех конструкторов дает самый чистый и качественный код без лишнего мусора, что приближает его по качеству к классической верстке;
• удобный функционал позволяет верстать сложные макеты за пару дней;
• более 80% трафика на сайт приходит с мобильной версии, в Webflow удобно создавать адаптивные версии сайта, которые будут подстраиваться под разные разрешения экранов.

Существует несколько способов для того, чтобы создавать анимации на Webflow. Большинство решений можно реализовать через функционал, который встроен в Webflow. Речь идет об Interactions. Эти анимации делятся на:

• Element trigger используются для взаимодействия с каким-то конкретным элементом. Это может быть, например, взаимодействие по клику, при наведении или при скролле;
• Page trigger позволяет создавать анимации не с каким-то одним элементом, а на всей странице.

Если решение нельзя реализовать через нативный функционал Webflow напрямую, на помощь приходят Lottie-анимации. Lottie — это библиотека для iOS, Android и веб-разработки. По сути, lottie помогает отображать анимации, созданные в After Effects. Поэтому если у заказчика есть готовые анимации, их можно выгрузить как lottie и затем настроить через Interaсtions. Также lottie можно создавать через специальные конструкторы по типу Lottiefiles или через Figma.

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

GSAP — это сторонняя библиотека для реализации анимаций любого уровня сложности с помощью JavaScript. В данном случае, возможности для анимирования гораздо шире, есть и зацикливание, и поэтапные анимации, и рисование SVG. С GSAP можно анимировать практически любые CSS свойства и объекты.

А теперь давайте разберем на примере реальных проектов, какие сайты можно создавать с помощью Webflow.

OFF BRAND

Этот сайт, созданный на Webflow, получил целых две награды от Awwwards (самый престижный конкурс в мире в сфере дизайна и веб-разработки). OFF BRAND — маркетинговое агентство полного цикла. На сайте использован прелоадер, который позволяет сложным анимациям прогрузиться к нужному моменту. Также мы видим интерактивный 3D-элемент на главном экране, с которым можно взаимодействовать, и много интересных мини-анимаций.

Кстати, с недавних пор работать с 3D в Webflow стало как никогда просто. А все потому что у Webflow появилась интеграция со Spline. Spline — это платформа для создания 3D-моделей с простым интерфейсом. Там есть огромная библиотека готовых элементов, с помощью которой каждый внедрить 3D на свой сайт без специальных навыков.

Webflow также отличается очень большим комьюнити. Существует библиотека Made in Webflow, где хранятся тысячи готовых решений, который каждый может клонировать и посмотреть, как они реализованы. А также адаптировать под себя. Например, вот такое 3D-решение может клонировать себе и адаптировать под себя любой пользователь.

Rose Island

Данный сайт посвящен истории острова Роз и также был отмечен наградой от Awwwards. Это пример того, какого уровня можно добиться, применив код. На сайте реализованы те самые GSAP-анимации, для которых необходимо разбираться в коде.

В библиотеке Made in Webflow можно найти и клонировать даже сложные решения с GSAP-анимациями и добавить их на свой сайт, не прибегая к написанию кода самостоятельно.

VRTL WRLD

Сайт креативной студии в направлении web3 и метавселенных, в котором сочетается яркая типографика и динамичные анимации. Здесь также использованы GSAP-анимации, а именно — анимации по скроллу.

В библиотеке Made in Webflow есть похожее решение для курсора в пиксельном стиле, которое можно клонировать себе на сайт.

Diesel

Это сайт с e-commerсe функционалом для новой коллекции fashion-бренда DIESEL. Тут мы видим прелоадер и пиксельный эффект на фото и товарах при пролистывании. Все решения реализованы внутри Webflow и для них не нужно знание кода.

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

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

больше про ноу-код разработку, верстку на Webflow и заработок на международном рынке на Upwork можно узнать у нас в Telegram-канале.

а попробовать сверстать свой первый сайт можно на нашем бесплатном курсе с поддержкой менторов или по нашим урокам на YouTube.