Анимации помогают «оживить» сайт: делают его интереснее и отзывчивее. Но создавать их вручную не всегда удобно, потому что приходится тратить время на написание кода, сложные вычисления и трансформации. Гораздо проще использовать библиотеки с готовыми анимациями или инструментами, облегчающими создание эффектов.
CSS-библиотеки для анимации
Animate.css
Библиотека включает около ста разных эффектов, в том числе появление и исчезание элементов, вращение, изменение размеров и «дребезг». Вы можете использовать её, например, чтобы выделить текст, подсказки или что-то ещё, на чём нужно поставить акцент.
Эффекты настраиваются: меняется скорость, продолжительность или задержка анимации. Как это сделать — подскажет простая и подробная документация. В ней даже есть раздел «Лучшие практики» с советами по созданию анимации. Например, там говорится, что не стоит использовать бесконечные анимации или анимировать крупные блоки.
Animate.css также поддерживает медиавыражение prefers-reduced-motion. Оно нужно, чтобы пользователи с судорожными расстройствами могли отключить анимацию в своих браузерах.
cssanimation.io
Библиотека для CSS-анимаций, которая также поддерживает Greensock — стандартную среду для JavaScript-анимации.
В cssanimation.io более 70 эффектов. Например, вы сможете создать печатающийся текст, анимацию волны, размытия или изменения размеров букв. На главной странице есть блоки с HTML и CSS — выбираете понравившийся эффект и сразу видите разметку и стили элемента.
Также есть простая и подробная инструкция с примерами из CodePen — вы можете поиграться с каждой анимацией, меняя CSS-свойства в песочнице кода.
☝ Хочется анимировать сайты и приложения?
Мы запустили курс «Мастер анимаций». Он научит вас создавать красивые эффекты на чистом CSS и JS, а также использовать популярные библиотеки.
Animista
Библиотека, в которой можно поиграть с набором анимаций. Вы прямо в интерфейсе редактора выбираете подходящий эффект и настраиваете его параметры: замедление, задержку или продолжительность. А в конце генерируете CSS-код — если нужно, минифицировав и добавив автопрефиксы:
@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5)}100%{-webkit-transform:scale(1);transform:scale(1)}}
Есть короткая инструкция по использованию. В ней говорится, что некоторые анимации в Animista — экспериментальные и могут не работать в старых браузерах.
Magic CSS
Небольшая библиотека с набором CSS-анимаций, которые можно запускать при наступлении браузерного события. Такие эффекты используются, например, чтобы по клику на кнопку эффектно показать другой элемент.
Документация небольшая, но её достаточно для работы с Magic CSS.
CSS Wand
В этой библиотеке собраны анимации для кнопок, индикаторов загрузки и полей ввода. Эффектов пока немного, но автор принимает запросы на новые анимации — если вам чего-то не хватает, напишите ему.
Библиотека очень простая, поэтому у неё нет объёмной документации — только пара строк о том, как клонировать CSS Wand локально. Также можно посмотреть и скопировать код понравившегося эффекта прямо на сайте — для этого нужно просто нажать на элемент.
JS-библиотеки для анимации
Three.js
Библиотека на WebGL, она используется при создании 3D для игр, симуляций и сайтов. Three.js работает с анимацией, шейдерами и разными объектами, например, спрайтами и линиями. Для работы используются три элемента: сцена — пространство, где выполняется анимация, камера — с помощью чего видно сцену, и рендер — показывает, что видит камера.
У Three.js хорошая документация со множеством примеров, хотя новичкам, возможно, с ней будет непросто разобраться. Также есть платный курс с пошаговым обучением — за уроки придётся заплатить $95.
GSAP
Гибкая библиотека для создания пошаговых анимаций. Она помогает анимировать кривые Безье, свойства CSS, массивы и многое другое. Например, с её помощью вы можете создавать такие эффекты при прокрутке страниц:
Также GSAP быстрая и легковесная. Как говорят сами разработчики, «плавная анимация — отличительная черта любой достойной библиотеки, а GSAP превосходит старые отраслевые стандарты на 1000%+ под нагрузкой».
У библиотеки подробная документация с формой поиска. Есть форумы, на которых можно задать вопрос по работе с GSAP. Поэтому разобраться с библиотекой будет несложно.
Anime.js
Легковесная библиотека, работает со свойствами CSS, SVG, атрибутами DOM и объектами JavaScript.
У Anime.js минималистичная документация, которая описывает, что можно анимировать и какие есть параметры. Текста мало, но зато показан код и сами эффекты.
KUTE.js
Библиотека для анимирования элементов сайта. Например, вы можете добавить эффекты для кнопок, иконок или фотографий, добавить прокрутку для целых блоков или выделить заголовки.
KUTE.js подходит для работы с векторной графикой, в том числе для создания морфинга — преобразования фигуры:
KUTE.js не поддерживается устаревшими браузерами, но зато в ней можно создавать резервные анимации.
Документация также подробная. Есть примеры, показывающие работу компонентов.
D3.js
Библиотека для визуализации данных, подходит для работы с Canvas. Например, с помощью D3.js вы можете анимировать схемы, таблицы, графики, диаграммы или карты.
У библиотеки объёмная документация. Есть русскоязычная версия, но многие статьи ещё не переведены.
Заключение
Библиотек много — гораздо больше, чем мы перечислили в этой статье. Есть большие, которые используются для добавления сложных 3D-изображений. А есть совсем простые, с маленьким набором анимаций для определённого элемента сайта. Например, Hamburgers используется только для оживления бургеров, а TooltopAnimations — для всплывающих подсказок.
При выборе библиотеки опирайтесь на свою задачу. Например, если вам нужно анимировать кнопку по наведению, можете остановиться на CSS Wand. А если нужно сделать анимированную диаграмму, подойдёт D3.js.