Анимация - это то, что помогает нам лучше понять задумки дизайнера и улучшить взаимодействие с интерфейсом. Она может вкратце передать сложные идеи, захватывая и информируя нас одновременно, но может и и сильно оттолкнуть.
Бренды сейчас делают всё возможное, чтобы показать свою уникальность и привлечь наше внимание, а анимация в этом играет большую роль. Она делает бренды менее скучными и статичными, показывая их мощь в цифровом мире. В следующем году мы увидим ещё больше анимированных логотипов.
И вот еще: GIF-анимация вернулась в тренд. Она так популярна, потому что её можно смотреть почти на любом устройстве.
Сейчас у дизайнеров есть куча инструментов для создания анимации, которые делают этот процесс проще и позволяют многим людям попробовать свои силы в анимации. Раньше только специалисты этим занимались, а сейчас все могут попробовать.
Эти инструменты также помогают смешивать дизайн и разработку. Мы видим, как дизайнеры создают анимацию, делают прототипы и изучают код, чтобы общаться с клиентами и разработчиками.
Современные браузеры позволяют отображать анимацию с высокой частотой кадров даже на мобильных устройствах. Вот почему в 2023-2024 году анимация будет в тренде.
Но важно использовать анимацию разумно. Вам нужно выбирать моменты, когда она действительно улучшает пользовательский опыт (UX). Не надо насильно добавлять анимацию только для того, чтобы привлечь внимание, это обычно не работает.
Когда анимация используется правильно, она может сделать обычный проект шикарным. Используй анимацию со здравым смыслом в своих веб-проектах. Примеры использования уникальных анимаций на сайтах вы можете посмотреть у Артемия Лебедева (https://www.artlebedev.com/web/)
10 ресурсов для веб-анимации:
CodePen (https://codepen.io/) - Платформа, где вы можете находить и делиться анимациями на основе HTML, CSS и JavaScript.
Animista (https://animista.net/) - Коллекция готовых CSS анимаций, которые вы можете настроить под свои нужды.
GreenSock Animation Platform (GSAP) (https://greensock.com/gsap/) - Мощная библиотека анимации на JavaScript для создания сложных и интерактивных анимаций.
LottieFiles (https://lottiefiles.com/) - Коллекция готовых анимаций в формате Lottie, которые можно использовать в веб-проектах.
Animate.css (https://animate.style/) - Библиотека анимаций на CSS, которая позволяет добавлять простые и эффектные анимации без необходимости писать свой собственный код.
Mo.js (https://mojs.github.io/) - Библиотека анимации на JavaScript, которая специализируется на создании уникальных и красивых анимаций.
Webflow (https://webflow.com/) - Платформа для создания веб-сайтов с интегрированным редактором анимаций и интерактивности.
Three.js (https://threejs.org/) - Библиотека для создания 3D анимаций на основе WebGL.
SVG.js (https://svgjs.com/) - JavaScript библиотека для создания и анимации векторной графики (SVG) в веб-проектах.
Bodymovin (https://github.com/bodymovin/bodymovin) - Инструмент, позволяющий экспортировать анимации из Adobe After Effects в формате Lottie для использования в веб-проектах.
----------------------------------------------
Полный список ресурсов для помощи в создании веб-анимации:
1. CodePen (https://codepen.io/)
2. Animista (https://animista.net/)
3. GreenSock Animation Platform (GSAP) (https://greensock.com/gsap/)
4. LottieFiles (https://lottiefiles.com/)
5. Animate.css (https://animate.style/)
6. Mo.js (https://mojs.github.io/)
7. Webflow (https://webflow.com/)
8. Three.js (https://threejs.org/)
9. SVG.js (https://svgjs.com/)
10. Bodymovin (https://github.com/bodymovin/bodymovin)
11. CSS Animation Rocks (https://cssanimation.rocks/)
12. Anime.js (https://animejs.com/)
13. React Spring (https://www.react-spring.io/)
14. Velocity.js (http://velocityjs.org/)
15. Paper.js (http://paperjs.org/)
16. Popmotion (https://popmotion.io/)
17. AOS - Animate On Scroll Library (https://michalsnik.github.io/aos/)
18. GSAP ScrollTrigger (https://greensock.com/scrolltrigger/)
19. Snap.svg (https://snapsvg.io/)
20. Vivus.js (https://maxwellito.github.io/vivus/)
21. Framer Motion (https://www.framer.com/motion/)
22. Phaser (https://phaser.io/)
23. Babylon.js (https://www.babylonjs.com/)
24. ScrollMagic (http://scrollmagic.io/)
25. Magic Animations (https://www.minimamente.com/project/magic/)
26. CSShake (https://elrumordelaluz.github.io/csshake/)
27. WOW.js (https://wowjs.uk/)
28. Velocity.js (http://velocityjs.org/)
29. GSDevTools (https://greensock.com/gsdevtools/)
30. Motion UI (https://foundation.zurb.com/building-blocks/blocks/motion-ui.html)
