Recentemente, me deparei com um antigo tutorial mostrando uma animação fly-to-cart usando jQuery. Eu queria me desafiar implementando o mesmo efeito usando JavaScript puro.

Criei um layout simples com produtos e um ícone de carrinho de compras. O estilo não importa, então não discutiremos isso aqui.

O truque é clonar a imagem do produto e anexá-la ao elemento do produto. Em seguida, calcule as coordenadas da imagem clonada e do ícone do carrinho, obtenha a diferença e traduza sua imagem para ela. Você pode adicionar efeitos extras, como escalar para 0 ou diminuir a opacidade. Adicione uma propriedade de transição para realmente animar as mudanças de estilo

Se você quiser colocar animações no ícone do carrinho também, use os eventos transactionstart e transactionend na imagem clonada para adicionar e remover uma classe CSS com animação definida nela.