Récemment, je suis tombé sur un vieux tutoriel présentant une animation fly-to-cart utilisant jQuery. Je voulais me mettre au défi en implémentant le même effet en utilisant du JavaScript pur.

J'ai créé une mise en page simple avec des produits et une icône de panier. Le style n'a pas d'importance, nous n'en discuterons donc pas ici.

L'astuce consiste à cloner l'image du produit et à l'ajouter au début de l'élément produit. Ensuite, calculez les coordonnées de votre image clonée et de l'icône de votre panier, obtenez la différence et traduisez votre image dessus. Vous pouvez ajouter des effets supplémentaires comme une mise à l'échelle à 0 ou une décoloration de l'opacité. Ajoutez une propriété de transition pour qu'elle anime réellement les changements de style

Si vous souhaitez également mettre des animations sur l'icône du panier, utilisez les événements transitionstart et transitionend sur l'image clonée pour ajouter et supprimer une classe CSS avec une animation définie dessus.