10 библиотек для CSS и JS анимации

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

CSS-библиотеки для анимации

Animate.css

Библиотека включает около ста разных эффектов, в том числе появление и исчезание элементов, вращение, изменение размеров и «дребезг». Вы можете использовать её, например, чтобы выделить текст, подсказки или что-то ещё, на чём нужно поставить акцент.

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

Animate.css также поддерживает медиавыражение prefers-reduced-motion. Оно нужно, чтобы пользователи с судорожными расстройствами могли отключить анимацию в своих браузерах.

Сайт Animate.css

cssanimation.io

Библиотека для CSS-анимаций, которая также поддерживает Greensock — стандартную среду для JavaScript-анимации.

В cssanimation.io более 70 эффектов. Например, вы сможете создать печатающийся текст, анимацию волны, размытия или изменения размеров букв. На главной странице есть блоки с HTML и CSS — выбираете понравившийся эффект и сразу видите разметку и стили элемента.

Также есть простая и подробная инструкция с примерами из CodePen — вы можете поиграться с каждой анимацией, меняя CSS-свойства в песочнице кода.

Сайт cssanimation.io

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 — экспериментальные и могут не работать в старых браузерах.

Сайт Animista

Magic CSS

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

Документация небольшая, но её достаточно для работы с Magic CSS.

Сайт Magic CSS

CSS Wand

В этой библиотеке собраны анимации для кнопок, индикаторов загрузки и полей ввода. Эффектов пока немного, но автор принимает запросы на новые анимации — если вам чего-то не хватает, напишите ему.

Библиотека очень простая, поэтому у неё нет объёмной документации — только пара строк о том, как клонировать CSS Wand локально. Также можно посмотреть и скопировать код понравившегося эффекта прямо на сайте — для этого нужно просто нажать на элемент.

Сайт CSS Wand

JS-библиотеки для анимации

Three.js

Библиотека на WebGL, она используется при создании 3D для игр, симуляций и сайтов. Three.js работает с анимацией, шейдерами и разными объектами, например, спрайтами и линиями. Для работы используются три элемента: сцена — пространство, где выполняется анимация, камера — с помощью чего видно сцену, и рендер — показывает, что видит камера.

У Three.js хорошая документация со множеством примеров, хотя новичкам, возможно, с ней будет непросто разобраться. Также есть платный курс с пошаговым обучением — за уроки придётся заплатить $95.

Сайт Three.js

GSAP

Гибкая библиотека для создания пошаговых анимаций. Она помогает анимировать кривые Безье, свойства CSS, массивы и многое другое. Например, с её помощью вы можете создавать такие эффекты при прокрутке страниц:

Также GSAP быстрая и легковесная. Как говорят сами разработчики, «плавная анимация — отличительная черта любой достойной библиотеки, а GSAP превосходит старые отраслевые стандарты на 1000%+ под нагрузкой».

У библиотеки подробная документация с формой поиска. Есть форумы, на которых можно задать вопрос по работе с GSAP. Поэтому разобраться с библиотекой будет несложно.

Сайт GSAP

Anime.js

Легковесная библиотека, работает со свойствами CSS, SVG, атрибутами DOM и объектами JavaScript.

У Anime.js минималистичная документация, которая описывает, что можно анимировать и какие есть параметры. Текста мало, но зато показан код и сами эффекты.

Сайт Anime.js

KUTE.js

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

KUTE.js подходит для работы с векторной графикой, в том числе для создания морфинга — преобразования фигуры:

KUTE.js не поддерживается устаревшими браузерами, но зато в ней можно создавать резервные анимации.

Документация также подробная. Есть примеры, показывающие работу компонентов.

Сайт KUTE.js

D3.js

Библиотека для визуализации данных, подходит для работы с Canvas. Например, с помощью D3.js вы можете анимировать схемы, таблицы, графики, диаграммы или карты.

У библиотеки объёмная документация. Есть русскоязычная версия, но многие статьи ещё не переведены.

Сайт D3.js

Заключение

Библиотек много — гораздо больше, чем мы перечислили в этой статье. Есть большие, которые используются для добавления сложных 3D-изображений. А есть совсем простые, с маленьким набором анимаций для определённого элемента сайта. Например, Hamburgers используется только для оживления бургеров, а TooltopAnimations — для всплывающих подсказок.

При выборе библиотеки опирайтесь на свою задачу. Например, если вам нужно анимировать кнопку по наведению, можете остановиться на CSS Wand. А если нужно сделать анимированную диаграмму, подойдёт D3.js.

Материалы по теме

• Интерактивная SVG-диаграмма
• Анимация на чистом CSS
• Анимация контуров на Anime.js
• Параллакс на CSS и JS

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.