Как задать анимированную траекторию img картинки?

Здраствуйте всем! Искал решение проблемы, но конкретного ответа не нашёл. Везде по кускам собирал информацию и ничего не склеилось.

В общем, вопрос следующий: есть в макете Figma картинка ракеты с нарисованной пунктирной траекторией. Её нужно анимировать так, чтобы img картинка ракеты двигалась по заданной траектории и оставляла за собой пунктирную линию введите сюда описание изображения


Ответы (1 шт):

Автор решения: BabyFrontent.ru Admin

Делать как написал puffleeck точно не надо. Следует анимацию ракеты сделать при помощи библиотеки gsap, как советовал Monkey Mutant. Пунктирный появляющийся путь делается следующим образом: добавляем две картинки SVG, одну линию пунктирную как на вашей картинки, другую точно такую же, но сплошную и белую. Далее помещаем их обе в HTML, но белую поверх пунктирной. Потом по принципу, который описан в ссылке ниже
https://css-tricks.com/svg-line-animation-works
анимируем белую, полностью убирая её. Получается так, что изначально она закрывает пунктирную, но затем она "уменьшается", показывая пунктирную. Это создаёт видимость того, будто пунктирная появляется сама.

→ Ссылка