Recientemente, me topé con un antiguo tutorial que muestra una animación de vuelo al carrito usando jQuery. Quería desafiarme a mí mismo implementando el mismo efecto usando JavaScript puro.

Creé un diseño simple con productos y un ícono de carrito de compras. El estilo no importa, así que no lo discutiremos aquí.

El truco consiste en clonar la imagen del producto y anteponerla al elemento del producto. Luego calcula las coordenadas de tu imagen clonada y el ícono del carrito, obtén la diferencia y traduce tu imagen. Puede agregar efectos adicionales como escalar a 0 o atenuar la opacidad. Agregue una propiedad de transición para animar realmente los cambios de estilo

Si también deseas poner animaciones en el ícono del carrito, usa el evento de inicio de transición y fin de transición en la imagen clonada para agregar y eliminar una clase CSS con animación configurada.