Список лучших инструментов для web-анимации

image

Список лучших инструментов для web-анимации. SVG/CSS/Canvas/DOM анимация + GUI инструменты для генерации кривых Безье и CSS анимации.

В будущем список будет дополнен книгами и видео-курсами по web-анимации. Если вы заметите, что какого-то стоящего инструмента не присутствует — пожалуйста, напишите об этом и я добавлю его.

Также буду рад отзывам на инструменты из текущего списка, с помощью ваших отзывов я смогу сделать описание инструментов более полным.



Категории:
SVG
Canvas
DOM
CSS
Easing
GUI
Scroll


SVG



Snap.svg



Одна из наиболее популярных библиотек для SVG. Не только для анимации, но и для удобной работой с SVG вообще. Современная версия Raphael.js

Минимальный вес: 81кб
Ссылка



SVG.js



Отличная библиотека с кучей крутейших плагинов и хорошей документацией. Заявляется лучшая производительность в сравнении с Snap.svg и Raphael.js

Минимальный вес: 64кб
Ссылка



Animateplus



Библиотека может быть интересна своей легковесностью. Автором не развивается.

Минимальный вес: 9кб
Ссылка



Vivus



Отличная библиотека для анимации контуров SVG, имеет также GUI-версию.

Минимальный вес: 11кб
Ссылка



Raphael



Хороший вариант, если вам нужно поддерживать таких мамонтов как IE6, в ином случае посмотрите на Snap.svg, Svg.js или любой другой современный вариант.

Минимальный вес: 91кб
Ссылка



Walkway



Хорошая библиотека для анимации контуров SVG, выделяется легковесностью.

Минимальный вес: 4кб
Ссылка



BonsaiJS



Интересна в качестве экспоната, автором не развивается, к сожалению.

Минимальный вес: 130кб
Ссылка



ProgressBar.js



Неплохое, хотя и слегка тяжеловесное решение для лоадера.

Минимальный вес: 21кб
Ссылка



SVG Morpheus



Библиотека для морфинга SVG. Плагин для GSAP решает эту задачу лучше, однако он платный, а этот инструмент бесплатен.

Минимальный вес: 22кб
Ссылка



Velocity.js



Серьёзное решение для JS анимации, используется многими большими ребятами и активно поддерживается автором.

Минимальный вес: 43кб
Ссылка



Mojs



Хорошая библиотека, с богатым функционалом и декларативным интерфейсом.

Минимальный вес: 130кб
Ссылка






DOM



GSAP



Анимационный гигант мира front-end. Сверх-производительность и масса плагинов, некоторые из которых уникальны. В бесплатной версии доступны не все плагины, однако и без них функционал очень широкий.

Минимальный вес: 41кб
Ссылка



Anime.js



Достаточно активно-развивающаяся библиотека. Очень-очень компактна для своих возможностей и имеет хорошую документацию.

Минимальный вес: 11кб
Ссылка



Animo.js



Совсем небольшая утилита, если размер библиотеки очень критичен, то можно рассмотреть и её.

Минимальный вес: 6кб
Ссылка



Move.js



Неплохое решение и легковесное решение с удобным интерфейсом.

Минимальный вес: 14кб
Ссылка



Textillate.js



Библиотека для простой анимации текста, к сожалению нуждается в достаточно тяжёлых зависимостях (таких как JQuery).

Минимальный вес: 8кб
Ссылка



Firmin



Интересна в качестве экспоната, давно заброшена автором.

Минимальный вес: 8кб
Ссылка



AliceJS



Интересна в качестве экспоната, давно заброшена автором.

Минимальный вес: 50кб
Ссылка



Motio



Позиционирует себя как «Sprite based animation library», выделяется легковесностью.

Минимальный вес: 4кб
Ссылка



Animatic



Подойдёт для простых решений, может похвастаться удобным интерфейсом.

Минимальный вес: 22кб
Ссылка




Just Animate



Свежая библиотека, выделяется легковесностью. Активно развивается автором.

Минимальный вес: 14кб
Ссылка




Popmotion



Серьёзная и комплексная штука. Создатели позиционируют её как более легковесный аналог GSAP. Выделяется интеграцией в React, относительно небольшим весом и классной работой с SVG.
За наводку спасибо exdeniz

Минимальный вес: 41кб
<a href=«popmotion.io> Ссылка





Canvas



CreateJS



Швейцарский нож для Canvas. Тут хороший API для canvas и модуль для анимации, и для аудио. Используется как стандартная библиотека для экспорта HTML5 в Adobe Animate (ex Flash Pro). Очень серьёзная штука, подойдёт как для рекламы/промо, так и для создания HTML5 игр.

Минимальный вес: 186кб
Ссылка



Bhive



Может быть интересна как экспонат. Автором не развивается.

Минимальный вес: 36кб
Ссылка



Two.js



Интересная библиотека, которая может рендерить в Canvas, SVG и даже WebGl. Активно развивается, достаточно производительная и радует функционалом.

Минимальный вес: 50кб
Ссылка



Ocanvas



Минимальный вес: 73кб
Ссылка




Позиционируется как „Object-based canvas drawing“. Автором не заброшена.

Fabric.js



Подойдёт не только для анимации Canvas, но и как абстракция для работы с ним.

Минимальный вес: 248кб
Ссылка



Paper.js



Позиционирует себя как „Vector graphics scripting framework“. Серьёзный и интенсивно развивающийся инструмент.

Минимальный вес: 277кб
Ссылка



Konva



Неплохой инструмент для анимации и вообще для работы с Canvas.

Минимальный вес: 138кб
Ссылка



DeltaJS



Реализует векторную графику поверх Canvas с событиями мыши и тачей, анимацией и всем остальным. Сейчас в Core очень много разных дополнительных модулей, которые позже будут перенесены в часть More (а-ля Mootools). Например, умеет рисовать плавные кривые через множество точек, анимировать движение объекта вдоль пути, анимировать превращение одной кривой в другую (в том числе и разных видов — например, кривую Лагранжа в кривую Безье), есть Draggable и много разных классных вещей.
В планах WebGL и SVG.

За библиотеку спасибо Keyten

Минимальный вес: 84кб
Ссылка




PixiJS



Очень и очень серьёзный инструмент для создания эффектов, анимации и даже игр. Может рендерить как в WebGL так и в Canvas для старых платформ. Обладает огромнейшим функционалом и отличной производительностью, однако вес у него соответствующий.

Минимальный вес: 414кб
Ссылка





Scroll



AOS



Неплохая простая библиотека для анимаций по скролингу, подойдёт для простых задач.

Минимальный вес: 13кб
Ссылка



Wow.js



Простое решения для анимаций по скролингу. Для коммерческого использования не бесплатна.

Минимальный вес: 13кб
Ссылка



ScrollReveal



Легковесная и бесплатная для коммерческого использования.

Минимальный вес: 9кб
Ссылка



ScrollMagic



Несмотря на то, что последние изменения библиотеки были 2 года назад, является наиболее функциональным решением для скролл-анимации.

Минимальный вес: 17кб
Ссылка



Skrollr



Отличнейшая библиотека для сложных анимаций привязанных к скролу. Может похвастаться легковесностью и производительностью.

Минимальный вес: 12кб
Ссылка





Easing



Ceaser



GUI-инструмент для генерации нужный временных кривых.

Ссылка



Сubic-bezier



Инструмент для генерации временных кривых, не лучше и не хуже других.

Ссылка



Bezier easing



Ещё один инструмент для генерации временных кривых.

Ссылка





GUI



Stylie



GUI инструмент для генерации CSS-анимации.

Ссылка



Keyframer



Ещё один GUI инструмент для генерации CSS-анимации.

Ссылка



CSS-loaders



Небольшой набор CSS-лоадеров. Есть возможность кастомизировать цвета.

Ссылка



Bounce.js



Неплохой генератор CSS-анимаций.

Ссылка



CSS Animation Kit



GUI-инструмент для генерации CSS-анимаций. Не лучше и не хуже других.

Ссылка






Animista



На данный момент — самый функциональный и интересный GUI-инструмент. Можно попробовать хотя бы ради интереса.

Ссылка





CSS



Magic animations



Большой набор CSS-классов с различными анимациями.

Минимальный вес: 16кб
Ссылка



Animate.css



Большущая коллекция CSS-классов с анимациями.

Минимальный вес: 17кб
Ссылка



Spinkit



Небольшой набор CSS-лоадеров.

Ссылка



CSSanimate.com



GUI-инструмент для генерации CSS-анимаций.

Ссылка



CSS3 Animation Cheat Sheet



Небольшая библиотека CSS-классов с анимациями.

Минимальный вес: 12кб
Ссылка




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

Кроме того, доступна GUI версия каталога с фильтрами по категориям и размеру.
Share post

Comments 17

    +2
    Имхо, немножко странная подборка, всё в одну кучу.
    Кстати, в paperjs нет возможностей для анимации кроме обычного таймаута. Хотя демки у них и очень впечатляющие, конечно.

    Добавлю свою библиотеку.

    DeltaJS

    3 года назад (3 года и 3 дня, кстати; почти круглая дата) представил её на хабре под названием Graphics2D.js. Ко второй мажорной версии решил переименовать, но пока там бета, и много где фигурирует старое название.

    Реализует векторную графику поверх Canvas с событиями мыши и тачей, анимацией и всем остальным. Сейчас в Core очень много разных дополнительных модулей, которые позже будут перенесены в часть More (а-ля Mootools). Например, умеет рисовать плавные кривые через множество точек, анимировать движение объекта вдоль пути, анимировать превращение одной кривой в другую (в том числе и разных видов — например, кривую Лагранжа в кривую Безье), есть Draggable и много разных классных вещей.
    В планах WebGL и SVG.
      +2
      Спасибо за библиотеку, добавил её в список.
      На счёт группировки инструментов — согласен, сгруппирую их по категориям.
      Нормальная группировка есть в репозитории и в «GUI» версии.

      Хорошо бы ещё логотип вашей библиотеки в более высоком разрешении.
      0
      popmotion.io нету например, а библиотека неплохая. И да, немного свалили в кучу библиотеки и плагины.
        0
          0
          Спасибо, добавил. Очень крутая библиотека.
          0
          image
            +2
            как GUI инструмент, например, animista.net
              +1
              Добавил, на данный момент — самый функциональный и симпатичный GUI инструмент.
              Спасибо за наводку.
                0
                Спасибо!
                0
                У вас тоже Anime.js жестко тупит в хроме на маке?
                Я про анимацию на их сайте.
                  0
                  ЯБро на маке — нет
                  –1
                    0
                    Мне лестно, конечно, но он, к сожалению, уже малоактуален.
                    Лично я в последний раз, когда нужен был именно JS-фреймворк использовал Pixi. За счет WebGL он очень быстро работает.
                    Но вцелом я предпочитаю Unity — там и язык получше (C#) и движок игровой значительно мощнее.
                      0
                      Вы имеете ввиду экспорт Unity в WebGL/Canvas? Если да, то расскажите про ваш опыт, пожалуйста. Насколько там всё хорошо, годится ли экспорт в HTML5 для создания контента для веба, в том числе не игр, а каких-то серьёзных интерактивных штуковин?
                        0
                        Нет, лично я имею ввиду создание нативных приложений. Та игра, которую я делаю — весит под два гига и требует технологий, которые WebGL не тянет. Хотя у меня товарищ делает игрушку, экспортит в ВебГЛ и не жалуется.
                    0
                    а как же hardcore document.styleSheets[0].insertRule('.'+name,0)?

                    иногда полезно использовать что то совсем простое, а не тянуть многотонные либы.
                    а если использовать что то в духе davidwalsh.name/vendor-prefix то проблемы с разными браузерами снимаются.
                      0
                      Спасибо! Лишним не будет.

                      Only users with full accounts can post comments. Log in, please.