Как реализовать строго последовательную анимацию элементов во vuejs?

Question

[Sector567]

Нужно реализовать анимацию разных элементов в строгой последовательности.

Например, по клику на какую-то кнопку, один блок как бы врезается во второй, после чего этот второй блок как бы реагируя на это отлетает в противоположную сторону, далее останавливается и переворачивается на 360 градусов.

Как вообще реализуются такие анимации?

Answer 1

[Максим]

anime.js - в этом духе
pixi.js - сложнее но с webGL
gsap - вообще крутяк но есть платные плагины но хялявных с головой хватит

Comments

[Sector567]

Спасибо, буду смотреть

Answer 2

[Арсений Матыцин]

Вообще да, для нормальной работы с анимациями обычно используют сторонние библиотеки. Но вообще Vue сам считает начало и конец анимации. И из коробки дает инструмент для создания отсроченной анимации и т.д.