Как реализована анимация SVG элементов (персонажей) в web app?

Question

[Max Sagaidak]

Меня заинтересовала реализация анимации в Web Applications (веб сайтах). Увидел анимацию персонажей в duolingo, думал это gif, посмотрел код, а там рил перемещаются svg элементы. Так же прикреплю на скриншоте svg анимацию ракеты которая взлетает в верх пролетая много svg элементов.
И так, суть вопроса - какая библиотека используется для такой анимации как в duolingo. Могу предположить что что-то на подобии gsap (пол секунды погуглил), у кого есть опыт работы с веб анимацией, поделитесь, пожалуйста.



p.s Я пишу на NextJS желательно что бы библиотека хорошо работала с ним.

Comments

[dima89e]

анимированная svg иконка

Answer 1

[Ivan Bogachev]

Могу предположить что что-то на подобии gsap

Если рассматривать эту задачу в целом, без привязки к конкретному сайту, то это задача по созданию мультиков, в больших количествах, на потоке, в рамках сформированной дизайнерской системы. Делать это за счет фронтендеров - такая себе идея. Сложно всех синхронизировать, очень много накладных расходов. Это будет реально дорогая разработка. И разработчики нужны очень прошаренные по части анимаций, чтобы они были со всей командой дизайнеров на одной волне. Таких днем с огнем не найдешь. Более простой и дешевый подход состоит в том, чтобы этим всем занимались моушен-дизайнеры в рамках экосистемы Lottie. А со стороны разработки мы только интегрировали готовые сценки в сайт или приложение. В последние годы обычно все так и делают. Наш стек здесь не имеет значения, равно как и умения разработчиков.

Comments

[Max Sagaidak]

Прочел, и вижу что ты шариш в этой теме, спасибо, более подробно нужно будет узнать про работу с Lottie.

[Max Sagaidak]

А можешь предположить, каким образом это реализованно на duolingo - https://www.duolingo.com/

[Ivan Bogachev]

Max Sagaidak, На странице по ссылке наблюдаетсся много элементов с id вида __lottie_element_***. Тут вывод напрашивается сам собой.

[Max Sagaidak]

Ivan Bogachev, спасибо, хорошего вечера)

[accountnujen]

ещё есть по этому же типу rive.app . Более функциональная система

Answer 2

[ImagineTables]

Если анимацию должен создать непрограммист-аниматор на основе векторной графики (может, ещё и нарисовать векторную графику самому), то у него и надо спрашивать, каким инструментом он пользуется и во что вебообразное он может экспортировать свою анимацию.

Насколько я знаю, сейчас упомянутый выше Lottie это как раз один из стандартов для описания анимации.

Если подходить к анимированию со стороны кода, то сам я прописываю анимации тупо в CSS.