Топ-5 JavaScript-библиотек анимации

Когда дело касается качества пользовательского опыта, анимации меняют правила игры. Все хотят их использовать, но только так, чтобы это не подтолкнуло посетителя сайта к уходу. В этой статье я собрал пять наилучших анимационных библиотек JavaScript.

1. Anime.js

Anime.js — легковесная библиотека анимаций с простым, но мощным API. Она работает с CSS-свойствами, SVG, атрибутами DOM и объектами JavaScript.

Пример:

See the Pen animejs — Joint Academy by Mikael Ainalem (@ainalem) on CodePen.

2. Vivus

Vivus — легковесная JavaScript-библиотека (без зависимостей). Она позволяет анимировать SVG таким образом, будто они рисуются.

Кликните на рисунок и удерживайте клавишу мышки:

See the Pen Apple Touch ID Rapid Prototype by Matt Rothenberg (@mattrothenberg) on CodePen.

3. GSAP

GSAP — JavaScript-библиотека, превращающая разработчиков в спецов по анимации. Это одна из самых популярных библиотек JavaScript. С ее помощью можно анимировать буквально что угодно.

Используйте GSAP для создания потрясающих анимаций — таких, как в примере:

See the Pen GreenSock Home Page Animation — GSAP 3 by GreenSock (@GreenSock) on CodePen.

4. Typeit.js

Typeit.js позволяет создавать на сайтах прекрасные анимации с эффектом набора текста.

Только посмотрите на эту смешную историю о программисте:

See the Pen Chained Typing Text Animations w/ TypeIt JS by Alex MacArthur (@alexmacarthur) on CodePen.

5. ScrollOut

ScrollOut.js — JavaScript-библиотека, которая отслеживает изменения в прокрутке для включения эффектов раскрытия, параллакса и CSS-переменных.

See the Pen Scroll Triggered Elements (Splitting + ScrollOut) by Christopher Wallis (@notoriousb1t) on CodePen.

Если у вас есть свои любимые JS-библиотеки для создания анимаций, поделитесь в комментариях!

Перевод статьи «Top 5 JavaScript animation libraries 2021».