Fly to cart animation with Pure Javascript in few lines.

Recently, I stumbled upon an old tutorial showcasing a fly-to-cart animation using jQuery. I wanted to challenge myself by implementing the same effect using pure JavaScript.

I created a simple layout with products and a shopping cart icon. The styling doesn't matter so we won't discuss it here.

The trick is to clone the image of product, prepend it to the product element. Then calculate the coordinates of your cloned image and cart icon, get the difference and translate your image to it. You can add extra effects like scaling to 0 or opacity fading. Add a transition property for it to actually animate the changes in style

If you want to put animations on cart icon too, use the transitionstart and transitionend event on cloned Image to add and remove a CSS class with animation set on it.

The above is the detailed content of Fly to cart animation with Pure Javascript in few lines.. For more information, please follow other related articles on the PHP Chinese website!