Хочешь проверить свои знания по JS?
Подпишись на наш канал с тестами по JS в Telegram!
Решать задачи
Когда дело касается качества пользовательского опыта, анимации меняют правила игры. Все хотят их использовать, но только так, чтобы это не подтолкнуло посетителя сайта к уходу. В этой статье я собрал пять наилучших анимационных библиотек 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».
