From Product to Cart: Including Guiding Animations to the Buying Expertise

Hiya! I’m Andrea Biason, a Artistic Frontend Developer at Adoratorio Studio obsessed with volleyball, code, and issues in movement (together with GIFs, by the way in which!).

On this article, we’ll uncover strategy a easy e-commerce touchdown web page and remodel it right into a extra interactive and interesting expertise for the person with the ultimate objective of accelerating conversions whereas additionally making the person journey extra participating at such a vital, but typically disregarded second.

“I’ve a pal who wants a touchdown web page for his merchandise. Are you in?”

Once I acquired known as for this mission, my first thought was that I didn’t need it to be the standard e-commerce website.
So, I requested the designer, “How a lot artistic freedom do I’ve?”.
Happily, the reply was “Do no matter you need” so I began serious about what I may do to make the consequence participating.

“What if we add an animation to the CTA button if you click on it? The cart icon may seem…”

Uhm, really…no! An interplay on the ‘Add to cart’ button was the suitable answer, however I didn’t need to go together with one thing already seen one million instances — I needed to attempt creating one thing distinctive. The concept got here from serious about two utterly separate and unrelated elements: a gallery and a mouse path on the cursor. I assumed it could be fascinating to attempt merging them, utilizing the various photographs we had obtainable to create a form of path from the product to the cart.

Such a interplay wouldn’t solely have interaction the person visually but in addition information their gaze in direction of the checkout course of and the checkout course of.

Let’s take a more in-depth take a look at the code.

The Markup

<part class="content material">
  <div class="merchandise">
    <ul class="products__list">
      <li class="products__item" data-id="product-01" data-price="15" data-name="Product 01" data-cover="/photographs/product-01-cover.jpg">
        <div class="products__images">
          <img class="products__main-image" src="/photographs/product-01-cover.jpg" alt="Product 01">
          <div class="products__gallery">
            <img class="products__gallery-item" src="/photographs/galleries/product-01/01.jpg" alt="Product 01 gallery">
            <img class="products__gallery-item" src="/photographs/galleries/product-01/02.jpg" alt="Product 01 gallery">
            <img class="products__gallery-item" src="/photographs/galleries/product-01/03.jpg" alt="Product 01 gallery">
            <img class="products__gallery-item" src="/photographs/galleries/product-01/04.jpg" alt="Product 01 gallery">
            <img class="products__gallery-item" src="/photographs/galleries/product-01/05.jpg" alt="Product 01 gallery">
            <img class="products__gallery-item" src="/photographs/product-01-cover.jpg" alt="Product 01 gallery">
          </div>
        </div>
        <button kind="button" class="products__cta button">Add to cart</button>
      </li>
      <li>... </li>
      <li>... </li>
      <li>... </li>
      <li>... </li>
      <li>... </li>
    </ul>
  </div>
</part>

<apart class="cart">
  <div class="cart__bg"></div>
  <div class="cart__inner">
    <div class="cart__inner-close">Shut</div>
    <div class="cart__inner-bg"></div>
    <div class="cart-items"></div>
    <div class="cart-total cart-grid">
      <div class="cart-total__inner">
        <div class="cart-total__label">Whole:</div>
        <div class="cart-total__amount">€ 0</div>
        <div class="cart-total__taxes"> Supply charge and tax <br> calculated at checkout </div>
        <a category="cart-total__checkout-btn button" href="#">Checkout</a>
      </div>
    </div>
  </div>
</apart>

The HTML construction may be very easy. A CSS grid was created to shortly arrange the product show, and inside every merchandise, a wrapper was created for the primary picture and gallery. The explanation for making a wrapper is to have a single ingredient with a hard and fast top, permitting all photographs inside to scale to 100% of the dad or mum dimension, making responsive administration simpler as effectively.

At this level, the primary resolution got here up: ought to I create all picture nodes immediately throughout the markup or append the gallery photographs solely when the button is clicked? The primary strategy makes the HTML extra verbose and will increase the variety of nodes on the web page, whereas the second would require creating all photographs at runtime and including them to the node, delaying the animation’s begin and doubtlessly inflicting points with managing the queue for each processes.

I selected, subsequently, to embrace all photographs immediately within the HTML. This alternative additionally helped bypass a potential further situation: by retrieving all of the img nodes, I used to be capable of preload all photographs through the preliminary loading part whereas the preloader was nonetheless seen.

Alright, the HTML is prepared; it’s time to maneuver on to creating a category to handle the merchandise.

The “Merchandise” class

The Merchandise class has a quite simple construction and can primarily deal with:

1. Figuring out the x and y coordinates of the cart within the header, which is the purpose in direction of which the animation can be directed;
2. Including a click on listener on the CTAs to arrange the weather and begin the animation;
3. Creating the animation timeline;
4. Resetting the weather as soon as the animation is full.

export default class Merchandise {
	constructor() {
		this.merchandise = [...document.querySelectorAll('.products__item')];
		this.ctas = [...document.querySelectorAll('.products__cta')];
		this.cartButton = doc.querySelector('.cart-button');

		this.cartButtonCoords = { x: 0, y: 0 };

		this.currentProduct = null;
		this.currentGallery = [];
		this.otherProducts = [];
		this.isTopRow = false;

		this.init();
	}


	init() {
		this.setCartButtonCoords();

		this.ctas.forEach((cta, i) => {
			cta.addEventListener('click on', () => {
				this.currentProduct = this.merchandise[i];
				this.otherProducts = this.merchandise.filter((prod, index) => index !== i);
				this.currentGallery = [...this.currentProduct.querySelectorAll('.products__gallery-item')];
				this.isTopRow = window.innerWidth > 768 && i < 3;

				this.addToCart();
			})
		})


		window.addEventListener('resize', debounce(() => {
			this.setCartButtonCoords();
		}))
	}


	setCartButtonCoords() {
        const { x, y } = this.cartButton.getBoundingClientRect();
		this.cartButtonCoords = { x, y };
	}

...

Let’s shortly break down the init technique:

1. The this.setCartButtonCoords technique is named, which merely retrieves the x and y coordinates of the button within the header utilizing getBoundingClientRect();
2. A click on listener is created for the CTAs, the place the animation can be executed. This technique is easy: it merely defines the constructor values with the present merchandise to be animated, the opposite gadgets that must disappear, the lively gallery to be animated, and the this.isTopRow discipline, which can be used to outline the animation route;
3. A listener is created to observe resize occasions, resetting the cart coordinates each time the display screen dimension modifications. The debounce perform optimizes this by stopping the strategy from operating on each pixel resize, as an alternative triggering it after a timeout on the finish of the browser’s resize operation.

Now, let’s check out the juicy half: the this.addToCart technique, the place the GSAP timeline is created.

The “Add to cart” animation

Let’s undergo the evolution of the timeline step-by-step, ranging from the fundamentals.

The very first step is to focus on the chosen product and make the opposite gadgets disappear, then return every part to the unique state as soon as the animation is full.

tl.to(this.otherProducts, {
   scale: 0.8, autoAlpha: 0.05, period: 0.6, stagger: 0.04, ease: 'power2.out',
}, 'begin');
  
tl.to(this.currentProduct, {
  scale: 1.05, period: 1, ease: 'power2.out',
}, 'begin+=0.7');


tl.to([this.currentProduct, this.otherProducts], {
  scale: 1, autoAlpha: 1, period: 0.8, stagger: 0.03, ease: 'power2.out',
}, 'begin+=1.6');

The concept behind the animation is to maneuver the weather towards the cart coordinates, so step one within the timeline can be to tween the x and y coordinates of the gallery photographs.

tl.to(this.currentGallery, {
  x: this.cartButtonCoords.x,
  y: this.cartButtonCoords.y,
  stagger: {
    from: 'finish',
    every: 0.04,
  },
  period: 1.8,
  ease: 'power2.inOut'
});

We instantly face the primary downside: the photographs are shifting downward as an alternative of upward, as we’d count on. The reason being easy: we’re including the cart’s coordinates to the present coordinates of the picture.

The objective, subsequently, can be to calculate the space between the picture and the cart’s place, and subtract that distance through the tween. To do that, earlier than initializing the timeline, we retrieve the suitable and y coordinates of the present picture and subtract them from the cart’s coordinates.

const { y, proper} = this.currentGallery[0].getBoundingClientRect();

tl.to(this.currentGallery, {
  x: this.cartButtonCoords.x - proper,
  y: this.cartButtonCoords.y - y,

  ...

Now, as we will see, the photographs are shifting within the appropriate route in direction of the button.Let’s refine this primary step by including a fade-out impact to the photographs as they strategy their closing place, adjusting the size and autoAlpha properties.

tl.to(this.currentGallery, {
  x: this.cartButtonCoords.x - proper,
  y: this.cartButtonCoords.y - y,
  scale: 0,
  autoAlpha: 0,
  stagger: {
    from: 'finish',
    every: 0.04,
  },
  period: 1.8,
  ease: 'power2.inOut'
}, 'begin');

Alright, this might already be a superb consequence by adjusting the timeline period and easing, however the concept I had in thoughts was to create a extra elaborate path.

So, I considered splitting the timeline into two steps: a primary step the place the photographs would exit the body, and a second step the place they might head in direction of the cart.

And that is the place GSAP keyframes got here to my rescue!

Step one is to return to the start of the animation and likewise retrieve the peak utilizing the getBoundingClientRect() technique. This worth is then used to maneuver the photographs by 150% at 40% of the animation, earlier than directing them in direction of the cart within the subsequent 60% of the animation.

tl.to(this.currentGallery, {
  keyframes: {
    '40%': {
      y: top * 1.5,
      scale: 0.8,
      autoAlpha: 1,
    },
    '100%': {
      x: this.cartButtonCoords.x - proper,
      y: this.cartButtonCoords.y - y,
      scale: 0,
      autoAlpha: 0,
    },
  },
  stagger: {
    from: 'finish',
    every: 0.04,
  },
  period: 1.8,
  ease: 'power2.inOut',
}, 'begin');

Right here’s the ultimate consequence, however at this level, one other situation arises: the animation works effectively for the highest row, however the impact is misplaced within the backside row.

So shut, but to date.

Okay, how will we deal with the animation for the underside rows? By reversing the route: as an alternative of shifting downward, they are going to take the alternative path, detaching upward first, after which shifting in direction of the cart.
So, let’s begin utilizing this.isTopRow, which we created within the constructor, to outline whether or not the animation includes an merchandise from the highest row or the underside row.

Step one includes the transformOrigin of the photographs.

gsap.set(this.currentGallery, { transformOrigin: this.isTopRow ? 'high proper' : 'backside left' });

Then, we proceed by modifying the route throughout the keyframes, additionally retrieving the left place utilizing the preliminary getBoundingClientRect()

const { y, left, proper, top } = this.currentGallery[0].getBoundingClientRect();

...

keyframes: {
  '40%': {
    y: this.isTopRow ? top * 1.5 : -height * 1.5,
    scale: this.isTopRow ? 0.8 : 0.5,
    autoAlpha: 1,
  },
  '100%': {
    x: this.isTopRow ? this.cartButtonCoords.x - proper : this.cartButtonCoords.x - left,
    y: this.isTopRow ? this.cartButtonCoords.y - y : this.cartButtonCoords.y - y - top,
    scale: 0,
    autoAlpha: 0,
  },
},

Okay, we’re nearly there! There’s nonetheless a small imperfection within the animation of the underside row, brought on by the transformOrigin we simply set firstly of the timeline.

To visually appropriate the ultimate level, we’ll subtract an arbitrary worth from the vacation spot of the animation, similar to the scale of the cart merchandise depend badge.

'100%': {
  x: this.isTopRow ? this.cartButtonCoords.x - proper : this.cartButtonCoords.x - left - 12, // eradicating half button width
  y: this.isTopRow ? this.cartButtonCoords.y - y : this.cartButtonCoords.y - y - top + 25, // including full button top
  scale: 0,
  autoAlpha: 0,
},

Right here’s the ultimate consequence:

Now, let’s deal with resetting the animation on the finish of the timeline:

onComplete: () => {
   gsap.set(this.currentGallery, { scale: 1, autoAlpha: 1, y: 0, x: 0 });
   gsap.set(gallery, { autoAlpha: 0 });
   this.resetAnimation()
 },

We merely return the weather of the gallery, which have been simply animated, to their authentic place (which is strictly overlapping with the primary picture that is still seen, so no variations are noticeable), set the opacity to 0, and execute the strategy that clears the objects within the constructor.

resetAnimation() {
   this.currentProduct = null;
   this.currentGallery = [];
   this.otherProducts = [];
 }

The reset perform won’t even must be executed, since each time the clicking occasion is triggered on the CTA, the array is rewritten. Nevertheless, it’s nonetheless preferable to maintain the arrays empty as soon as we now not must work with the weather contained in them.

Okay, are we finished? I’d say not but, we nonetheless must deal with the cart!

Let’s not go away issues unfinished.

The Cart class was divided into two logical blocks throughout growth: the primary one solely includes the acquisition situation, and the second focuses solely on the logic for the doorway and exit animations of the sidebar.

Let’s begin with the product administration situation:

addItemToCart(el) {
  const { id, value, identify, cowl } = el.dataset;

  const index = this.cartItems.findIndex((el) => el.id === id);

  if (index < 0) {
    const newItem = { id, value, identify, cowl, amount: 1 };
    this.cartItems.push(newItem);

    const newCartItem = this.appendItem(newItem);
    this.cartItemsList.append(newCartItem);
  } else this.cartItems[index].amount += 1;

  this.updateCart();
}

The strategy for including a product to the cart may be very easy, and right here too it divides the logic into two eventualities:

1. The clicked CTA is for a new product;
2. The clicked CTA is for a product already within the cart.

The this.cartItems array within the constructor represents the record of all gadgets added to the cart, and is subsequently used throughout the technique to modify between the potential eventualities. If the product is just not already within the cart, it’s pushed into the this.cartItems array, and the HTML node is created via the this.appendItem technique. If the product is already within the cart, it’s merely retrieved by its index, and the amount is up to date.

Let’s shortly undergo the this.appendItem technique:

appendItem(merchandise) {
  const cartItem = doc.createElement('div');
  cartItem.classList.add('cart-item', 'cart-grid');
 
  cartItem.innerHTML = `
    <img class="cart-item__img" src="${merchandise.cowl}" alt="${merchandise.identify}">
 
    <div class="cart-item__details">
      <span class="cart-item__details-title">${merchandise.identify}</span>

      <button class="cart-item__remove-btn">Take away</button>

      <div class="cart-item__details-wrap">
        <span class="cart-item__details-label">Amount:</span>

        <div class="cart-item__details-actions">
          <button class="cart-item__minus-button">-</button>
          <span class="cart-item__quantity">${merchandise.amount}</span>
          <button class="cart-item__plus-button">+</button>
        </div>
        <span class="cart-item__details-price">€ ${merchandise.value}</span>
      </div>
    </div>
  `;

  const removeButton = cartItem.querySelector('.cart-item__remove-btn');
  const plusButton = cartItem.querySelector('.cart-item__plus-button');
  const minusButton = cartItem.querySelector('.cart-item__minus-button');

  removeButton.addEventListener('click on', () => this.removeItemFromCart(merchandise.id));
  plusButton.addEventListener('click on', () => this.updateQuantity(merchandise.id, 1));
  minusButton.addEventListener('click on', () => this.updateQuantity(merchandise.id, -1));


  return cartItem;
)

Along with including the HTML node, I additionally arrange all of the listeners for the varied buttons that make up the UI, linking them to their respective strategies:

• The “Take away” button will execute the this.removeItemFromCart(merchandise.id) technique to take away the article from the array of lively merchandise and the HTML node.
• The “+” and “-” buttons modify the amount of merchandise within the cart and execute the this.updateQuantity(merchandise.id, 1 / -1) technique, passing as a parameter the amount so as to add or take away.

On the finish of every cart modification (addition/elimination/amount change), I’ve arrange an replace technique to change the checkout whole.

updateCart() {
  const cartElementsQuantities = [...document.querySelectorAll('.cart-item__quantity')];
  this.cartButtonNumber.innerHTML = Object.values(this.cartItems).size;
 
  let cartAmount = 0;

  Object.values(this.cartItems).forEach((merchandise, i) => {
    cartElementsQuantities[i].innerHTML = merchandise.amount;
    cartAmount+= merchandise.value * merchandise.amount
  })

  this.cartTotal.innerHTML = `€ ${cartAmount}`;
}

This code was created for fundamental performance and would must be expanded to work correctly with an e-commerce website. In my case, having chosen the Shopify platform, I used the shopify-buy library to handle the APIs and sync the cart checkout with the ultimate checkout on the platform, however every platform has its personal APIs to deal with this.

One other potential implementation, barely extra complicated however positively extra user-friendly, could be to handle the merchandise added to the cart by saving them in LocalStorage, making certain they continue to be in reminiscence even when the person reloads the web page.

The ultimate step to finish the product addition to the cart can be, subsequently, to execute the addItemToCart technique throughout the timeline created earlier.

tl.add(() => {
  Cart.addItemToCart(this.currentProduct);
}, 'begin+=0.6');

On this method, through the animation of the photographs, the present product may also be pushed into the cart.

And why not animate the button with the variety of gadgets at this level?

Let’s carry it residence.

Inside the init technique of the Cart class, we initialize the button that can be animated setting parts to 0 scale.

Then we merely add, nonetheless inside the primary cart addition timeline, the this.cartButtonAnimationEnter technique, however provided that the present variety of merchandise within the cart is 0.

tl.add(() => {
  if (Cart.cartItems.size === 0) Cart.cartButtonAnimationEnter();
  Cart.addItemToCart(this.currentProduct);
}, 'begin+=0.6');

cartButtonAnimationEnter() {
  const tl = gsap.timeline();
  tl.addLabel('begin');

  tl.to(this.cartButtonLabel, { x: -35, period: 0.4, ease: 'power2.out' }, 'begin');
  tl.to([this.cartButtonNumber, this.cartButtonBg], {
    scale: 1, stagger: 0.1, period: 0.8, ease: 'elastic.out(1.3, 0.9)',
  }, 'begin');
  return tl;
}

And now, the ultimate half, essentially the most juicy one, which includes the doorway and exit animation of the cart.

So let it out and let it in.

Nonetheless throughout the init technique of the Cart class, we’ll handle two basic steps for your entire movement.
Step one is to execute the setup capabilities for the weather to animate, each cart button and cart opening animation.

The second step is to handle occasion listeners for enter and go away animations, primarily based on cart and shut buttons interactions:

init() {
   this.cartButtonAnimationSetup();
   this.cartAnimationSetup();


   this.cartButton.addEventListener('click on', () => {
     if (this.isAnimating) return;
     doc.physique.classList.add('locked');

     this.isAnimating = true;

     this.cartAnimationEnter().then(() => {
       this.cartOpened = true;
       this.isAnimating = false;
     })
   })
  
   this.cartClose.addEventListener('click on', () => {
     if (this.isAnimating) return;
     doc.physique.classList.take away('locked');

     this.isAnimating = true;

     this.cartAnimationLeave().then(() => {
       this.cartOpened = false;
       this.isAnimating = false;
     })
   })
 }

Let’s shortly analyze:

• this.isAnimating is used to stop the overlap of the 2 timelines (it is a stylistic alternative, not a compulsory one; the choice is to handle the ingredient queues with the killTweensOf technique from GSAP). If an animation is in progress, its reverse can’t be triggered till it’s accomplished;
• The locked class is added to the physique to block scrolling;
• The doorway/exit animation is triggered, after which the values this.isAnimating and this.cartOpened are set.

One final small be aware on the doorway animation:

cartAnimationEnter() {
   this.animatingElements.gadgets = [...this.cart.querySelectorAll('.cart-item')];
   if (this.animatingElements.gadgets.size > 0) gsap.set(this.animatingElements.gadgets, { x: 30, autoAlpha: 0 });

   const tl = gsap.timeline({
     onStart: () => gsap.set(this.cart, { xPercent: 0 })
   });
   tl.addLabel('begin');

   tl.to([this.animatingElements.bg, this.animatingElements.innerBg], {
     xPercent: 0, stagger: 0.1, period: 2.2, ease: 'expo.inOut',
   }, 'begin');

   tl.to(this.animatingElements.shut, {
     x: 0, autoAlpha: 1, stagger: 0.1, period: 1, ease: 'power2.out',
   }, 'begin+=1.3');
    if (this.animatingElements.gadgets.size > 0) {
     tl.to(this.animatingElements.gadgets, {
       x: 0, autoAlpha: 1, stagger: 0.1, period: 1, ease: 'power2.out',
     }, 'begin+=1.4');
   }
   if (this.animatingElements.noProds) {
     tl.to(this.animatingElements.noProds, {
       x: 0, autoAlpha: 1, stagger: 0.1, period: 1, ease: 'power2.out',
     }, 'begin+=1.4');
   }
    tl.to(this.animatingElements.whole, {
     scale: 1, autoAlpha: 1, stagger: 0.1, period: 1, ease: 'power2.out',
   }, 'begin+=1.6');

   return tl;
 };

this.animatingElements.gadgets is just not outlined throughout the this.cartAnimationSetup perform as a result of the variety of parts modifications every time they’re added by the animation, whereas that is solely known as through the initialization of the Cart class.

If we didn’t set the weather each time we run the doorway animation, this.animatingElements.gadgets would all the time be an empty array, and subsequently, we’d by no means see the gadgets added to the cart.

The go away animation merely repositions the weather outdoors of the format:

cartAnimationLeave() {
  const tl = gsap.timeline({
    onComplete: () => gsap.set(this.cart, { xPercent: 100 })
  });
  tl.addLabel('begin');

  tl.to([this.animatingElements.bg, this.animatingElements.innerBg], {
    xPercent: 110, stagger: 0.1, period: 1.5, ease: 'expo.inOut',
  }, 'begin');

  if (this.animatingElements.gadgets.size > 0) {
    tl.to(this.animatingElements.gadgets, {
      x: 30, autoAlpha: 0, stagger: 0.1, period: 0.8, ease: 'power2.out',
    }, 'begin');
  }
  if (this.animatingElements.noProds) {
    tl.to(this.animatingElements.noProds, {
      x: 30, autoAlpha: 0, stagger: 0.1, period: 0.8, ease: 'power2.out',
    }, 'begin');
  }

  tl.to(this.animatingElements.shut, {
    x: 30, autoAlpha: 0, stagger: 0.1, period: 0.8, ease: 'power2.out',
  }, 'begin');

  tl.to(this.animatingElements.whole, {
    scale: 0.9, autoAlpha: 0, stagger: 0.1, period: 0.8, ease: 'power2.out',
  }, 'begin');

  return tl;
}

And right here is the ultimate consequence with the cart animation!

Ah, perhaps you may’ve caught on however I forgot to say that I’m an enormous fan of The Workplace and that…