- PVSM.RU - https://www.pvsm.ru -

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

image

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

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

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

1. Snap.svg

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

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

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

2. SVG.js

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

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

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

3. GSAP

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

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

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

4. Anime.js

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

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

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

5. Animo.js

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

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

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

6. CreateJS

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

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

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

7. Bhive

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

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

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

8. Two.js

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

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

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

9. Ocanvas

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

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

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

10. AOS

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

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

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

11. Wow.js

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

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

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

12. ScrollReveal

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

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

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

13. ScrollMagic

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

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

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

14. Ceaser

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

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

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

15. Magic animations

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

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

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

16. Сubic-bezier

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

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

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

17. Stylie

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

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

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

18. Keyframer

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

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

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

19. Animateplus

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

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

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

20. Vivus

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

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

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

21. Raphael

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

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

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

22. Walkway

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

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

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

23. BonsaiJS

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

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

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

24. ProgressBar.js

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

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

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

25. SVG Morpheus

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

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

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

26. Velocity.js

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

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

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

27. Move.js

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

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

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

28. Textillate.js

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

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

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

29. Firmin

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

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

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

30. AliceJS

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

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

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

31. Motio

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

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

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

32. Animatic

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

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

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

33. Animate.css

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

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

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

34. Motion ui

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

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

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

35. CSS-loaders

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

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

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

36. Bounce.js

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

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

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

37. Spinkit

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

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

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

38. CSSanimate.com

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

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

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

39. CSS Animation Kit

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

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

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

40. CSS3 Animation Cheat Sheet

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

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

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

41. Skrollr

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

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

42. Skrollr

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

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

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

43. Fabric.js

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

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

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

44. Paper.js

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

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

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

45. Konva

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

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

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

46. Bezier easing

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

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

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

47. Just Animate

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

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

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

48. Mojs

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

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

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

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

Автор: Sergey Pimenov

Источник [49]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/267326

Ссылки в тексте:

[1] Ссылка : http://snapsvg.io/

[2] Ссылка : http://svgjs.com/

[3] Ссылка : https://greensock.com/

[4] Ссылка : http://animejs.com/

[5] Ссылка : https://animo.js.org/

[6] Ссылка : https://www.createjs.com/

[7] Ссылка : http://www.bhivecanvas.com/

[8] Ссылка : https://two.js.org/

[9] Ссылка : http://ocanvas.org/

[10] Ссылка : https://michalsnik.github.io/aos/

[11] Ссылка : http://mynameismatthieu.com/WOW/

[12] Ссылка : https://scrollrevealjs.org/

[13] Ссылка : http://scrollmagic.io/

[14] Ссылка : https://matthewlein.com/tools/ceaser

[15] Ссылка : https://minimamente.com/example/magic_animations/

[16] Ссылка : http://cubic-bezier.com/

[17] Ссылка : http://jeremyckahn.github.io/stylie/

[18] Ссылка : http://alexberg.in/keyframer/

[19] Ссылка : https://github.com/bendc/animateplus

[20] Ссылка : http://maxwellito.github.io/vivus/

[21] Ссылка : http://dmitrybaranovskiy.github.io/raphael/

[22] Ссылка : https://connoratherton.com/walkway

[23] Ссылка : http://bonsaijs.org/

[24] Ссылка : http://kimmobrunfeldt.github.io/progressbar.js

[25] Ссылка : http://alexk111.github.io/SVG-Morpheus/

[26] Ссылка : http://velocityjs.org/

[27] Ссылка : http://visionmedia.github.io/move.js/

[28] Ссылка : http://textillate.js.org/

[29] Ссылка : http://extralogical.net/projects/firmin/

[30] Ссылка : http://blackberry.github.io/Alice/

[31] Ссылка : http://darsa.in/motio/

[32] Ссылка : http://lvivski.com/animatic

[33] Ссылка : https://daneden.github.io/animate.css/

[34] Ссылка : https://zurb.com/playground/motion-ui

[35] Ссылка : https://projects.lukehaas.me/css-loaders/

[36] Ссылка : http://bouncejs.com/

[37] Ссылка : http://tobiasahlin.com/spinkit/

[38] Ссылка : http://cssanimate.com/

[39] Ссылка : http://angrytools.com/css/animation/

[40] Ссылка : http://www.justinaguilar.com/animations/

[41] Ссылка : http://prinzhorn.github.io/skrollr/

[42] Ссылка : http://fabricjs.com/

[43] Ссылка : http://paperjs.org/

[44] Ссылка : https://konvajs.github.io/

[45] Ссылка : https://github.com/gre/bezier-easing

[46] Ссылка : https://just-animate.github.io/

[47] Ссылка : http://mojs.io/

[48] коммитам в отдельном репозитории созданным специально для этого: https://github.com/web-animation/web-animation.github.io

[49] Источник: https://habrahabr.ru/post/341554/?utm_source=habrahabr&utm_medium=rss&utm_campaign=sandbox