Виды анимаций на Webflow 👀 Человеческий мозг гораздо быстрее реагирует на оживленные объекты, нежели чем на статические. И этим объясняется необходимость анимаций в интерфейсе. Анимации направляют внимание пользователей и фокусируют его на важных объектах. Они подсказывают, как работать с сайтом и облегчают взаимодействие с интерфейсом. Ну а еще они могут быть просто декоративные, чтобы задать динамики и креатива, с единственный функцией, чтобы пользователь подумал — ух-ты, красиво! Все анимации на Webflow можно поделить условно на 3 вида: 🟡 Interactions: нативный функционал Webflow Эти анимации делятся на: - Element trigger (нужны для взаимодействия с каким-то конкретным элементом (это может быть mouse click, mouseover, scroll into view, while scrolling in view, tab/slider change) - Page trigger (позволяет нам сделать анимацию не с каким-то одним элементом, а на всей странице. Тут мы встречаемся с уже известными mouse move, while page is scrolling, page load и page scroll) 🟡 Lottie Lottie — это библиотека для iOS, Android и веб-разработки. По сути, lottie помогает отображать анимации, созданные в After Effects. Поэтому если у заказчика есть готовые анимации, их можно выгрузить как lottie и затем настроить через Interaсtions. Но тут надо быть осторожным и не перегрузить страницу анимациями, иначе производительность сайта упадет. Чтобы такого не произошло, в ход идет GSAP. 🟡 GSAP GSAP — это сторонняя библиотека для реализации анимаций любого уровня сложности с помощью JavaScript. В данном случае, возможности для анимирования гораздо шире, есть и зацикливание, и поэтапные анимации, и рисование SVG. С помощью базового функционала Webflow можно реализовать множество решений, но если вы хотите большего, стоит присмотреться к GSAP. На обучении Webflow PRO в конце модуля GSAP вы как раз заверстаете свой первый кейс с применением GSAP-анимаций. Поэтому если хотите выйти на новый уровень в проектах — вам сюда✨