Анимации

1. GSAP

Библиотека GSAP — один из самых крутых бесплатных ресурсов, доступных разработчикам. Она работает исключительно на JavaScript и это одна из наиболее надежных библиотек анимации, которую вы можете использовать.

Библиотека работает поверх HTML5 и хорошо принимается всеми современными браузерами, не говоря уже о том, что команда постоянно добавляет новые функции в обновлениях. Она может работать с SVG, элементами canvas, даже, совместима с объектами jQuery и с другими подобными библиотеками, например, EaselJS.

Определенно стоит обратить на неё внимание, если нужна мощная библиотека веб-анимации. Однако, для простых задач есть множество маленьких библиотек, которые вы можете с успехом попробовать.

2. Anime.js

Плейлист по anime.js

Когда я впервые нашел Anime.js, то был приятно удивлён. Эта невероятно мощная вещь, выходящая за рамки простой анимации UI/UX.

С Anime.js можно создавать искусные анимации с логотипами, кнопками, изображениями, с чем вы захотите. Код поддерживает все типичные пользовательские триггеры такие, как clicks/hovers/swipes и у вас есть доступ к куче настраиваемых анимаций.

Если вы ознакомитесь с документацией, то найдёте массу примеров встраивания прямо в страницу. Плюс имеется коллекция на CodePen, наиболее полная для Anime.js.

3. Wicked CSS

Вот одна из новых библиотек с акцентом на использование только чистого кода CSS. Wicked CSS работает поверх свойств CSS3, показывая невероятные трюки.

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

Некоторые из них достаточно просты, чтобы вы смогли сделать их самостоятельно. Другие представляют собой довольно сложный комплекс, и то самое, что делает библиотеку Wicked CSS очень веселой.

4. Animate CSS

Возможно, окончательным ресурсом для веб-анимации является Animate CSS. Эта библиотека с открытым исходным кодом была выпущена несколько лет назад, но все еще наиболее актуальна, чем что-либо ещё.

Daniel Eden, разработчик стилей, создал этот проект как упрощенный способ добавления пользовательских CSS3 на веб-страницу. За эти годы набор стилей превратился в полноценную библиотеку анимации с достаточной мощностью для работы в любом крупном проекте.

Домашняя страница предлагает множество демо, так что вы можете проверить стили анимации, посмотреть и оценить её мощь. Кроме того, на GitHub есть масса отличной документации, включая список классов и некоторые примеры фрагментов кода.

5. Библиотека typed.js (имитация набора текста):

Установка/настройка

How to use Typed.js in HTML | JQuery Plugin Tutorial

6. Animista

https://animista.net/

CSS Animations with Animista