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

в 12:51, , рубрики: canvas, css, html, javascript, Web-animation
image

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

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

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

1. Snap.svg

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

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

Категория: SVG
Минимальный вес: 81кб
Ссылка

2. SVG.js

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

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

Категория: SVG
Минимальный вес: 64кб
Ссылка

3. GSAP

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

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

Категория: SVG DOM
Минимальный вес: 41кб
Ссылка

4. Anime.js

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

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

Категория: DOM SVG
Минимальный вес: 11кб
Ссылка

5. Animo.js

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

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

Категория: DOM
Минимальный вес: 6кб
Ссылка

6. CreateJS

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

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

Категория: Canvas
Минимальный вес: 186кб
Ссылка

7. Bhive

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

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

Категория: Canvas
Минимальный вес: 36кб
Ссылка

8. Two.js

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

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

Категория: Canvas
Минимальный вес: 50кб
Ссылка

9. Ocanvas

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

Категория: Canvas
Минимальный вес: 73кб
Ссылка

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

10. AOS

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

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

Категория: Scroll
Минимальный вес: 13кб
Ссылка

11. Wow.js

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

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

Категория: Scroll
Минимальный вес: 13кб
Ссылка

12. ScrollReveal

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

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

Категория: Scroll
Минимальный вес: 9кб
Ссылка

13. ScrollMagic

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

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

Категория: Scroll
Минимальный вес: 17кб
Ссылка

14. Ceaser

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

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

Категория: Easing
Ссылка

15. Magic animations

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

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

Категория: CSS
Минимальный вес: 16кб
Ссылка

16. Сubic-bezier

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

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

Категория: Easing
Ссылка

17. Stylie

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

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

Категория: GUI
Ссылка

18. Keyframer

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

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

Категория: GUI
Ссылка

19. Animateplus

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

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

Категория: SVG CSS
Минимальный вес: 9кб
Ссылка

20. Vivus

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

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

Категория: SVG
Минимальный вес: 11кб
Ссылка

21. Raphael

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

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

Категория: SVG
Минимальный вес: 91кб
Ссылка

22. Walkway

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

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

Категория: SVG
Минимальный вес: 4кб
Ссылка

23. BonsaiJS

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

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

Категория: SVG
Минимальный вес: 130кб
Ссылка

24. ProgressBar.js

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

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

Категория: SVG
Минимальный вес: 21кб
Ссылка

25. SVG Morpheus

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

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

Категория: SVG
Минимальный вес: 22кб
Ссылка

26. Velocity.js

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

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

Категория: SVG DOM
Минимальный вес: 43кб
Ссылка

27. Move.js

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

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

Категория: DOM
Минимальный вес: 14кб
Ссылка

28. Textillate.js

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

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

Категория: DOM
Минимальный вес: 8кб
Ссылка

29. Firmin

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

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

Категория: DOM
Минимальный вес: 8кб
Ссылка

30. AliceJS

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

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

Категория: DOM
Минимальный вес: 50кб
Ссылка

31. Motio

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

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

Категория: DOM
Минимальный вес: 4кб
Ссылка

32. Animatic

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

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

Категория: DOM
Минимальный вес: 22кб
Ссылка

33. Animate.css

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

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

Категория: CSS
Минимальный вес: 17кб
Ссылка

34. Motion ui

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

Неплохое решение, если вы используете Foundation.

Категория: DOM
Минимальный вес: 23кб
Ссылка

35. CSS-loaders

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

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

Категория: GUI
Ссылка

36. Bounce.js

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

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

Категория: GUI
Ссылка

37. Spinkit

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

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

Категория: GUI CSS
Ссылка

38. CSSanimate.com

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

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

Категория: GUI CSS
Ссылка

39. CSS Animation Kit

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

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

Категория: GUI CSS
Ссылка

40. CSS3 Animation Cheat Sheet

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

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

Категория: CSS
Минимальный вес: 12кб
Ссылка

41. Skrollr

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

Категория: Scroll
Минимальный вес: 12кб
Ссылка

42. Skrollr

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

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

Категория: Scroll
Минимальный вес: 12кб
Ссылка

43. Fabric.js

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

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

Категория: Canvas
Минимальный вес: 248кб
Ссылка

44. Paper.js

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

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

Категория: Canvas
Минимальный вес: 277кб
Ссылка

45. Konva

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

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

Категория: Canvas
Минимальный вес: 138кб
Ссылка

46. Bezier easing

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

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

Категория: Easing
Ссылка

47. Just Animate

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

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

Категория: DOM
Минимальный вес: 14кб
Ссылка

48. Mojs

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

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

Категория: SVG
Минимальный вес: 130кб
Ссылка

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

Автор: Sergey Pimenov

Источник

Поделиться

* - обязательные к заполнению поля