Skip to content

Шпаргалка по веб-анимационным библиотекам

JavaScript-анимационные библиотеки

GSAP

Ведущая в отрасли библиотека высокопроизводительной анимации, поддерживающая свойства CSS, SVG, Canvas и т. д., бесшовно интегрирующаяся с такими фреймворками, как React и Vue.

  • Особенности: Высокая производительность, простота использования, мощный функционал, поддержка таймлайнов

  • Установка: npm install gsap

  • Использование:

    import { gsap } from "gsap";

gsap.to(".box", { duration: 2, x: 100 });

Anime.js

Легкая JavaScript-анимационная библиотека, поддерживающая свойства CSS, SVG, свойства DOM и анимацию JavaScript-объектов.

  • Особенности: Простая в использовании, легкая, поддерживает различные типы анимации

  • Установка: npm install animejs

  • Использование:

    import anime from 'animejs/lib/anime.es.js';

anime({
  targets: '.box',
  translateX: 250,
  duration: 2000
});

Velocity.js

Сочетает в себе простоту использования jQuery и высокую производительность CSS, поддерживает очереди анимаций и контекстные элементы.

  • Особенности: Очереди анимаций, контекстные элементы, простота использования

  • Установка: npm install velocity-animate

  • Использование:

    import velocity from 'velocity-animate';

velocity(document.querySelector(".box"), { translateX: 250 }, { duration: 2000 });

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

Animate.css

Библиотека CSS-анимаций с богатым набором эффектов. Для реализации анимации достаточно просто добавить название класса.

  • Особенности: Множество анимационных эффектов, простое использование, хорошая совместимость

  • Установка: npm install animate.css --save

  • Использование:

    <link rel="stylesheet" href="animate.css">
<div class="animated bounce">Hello World!</div>

Hover.css

Библиотека эффектов при наведении на кнопки, реализованная исключительно на CSS3 и включающая в себя различные эффекты.

  • Особенности: Множество эффектов, реализована только на CSS3, проста в использовании

  • Установка: npm install hover.css

  • Использование:

    <link rel="stylesheet" href="hover.css">
<a class="hvr-grow">Grow</a>

CSShake

Набор CSS3-анимационных классов для создания эффектов встряхивания, покачивания и т. д.

  • Особенности: Уникальные анимационные эффекты, реализована только на CSS3, проста в использовании

  • Установка: npm install csshake

  • Использование:

    <link rel="stylesheet" href="csshake.css">
<div class="shake-little">Shake it!</div>