While checking out, customers notice small annoyances. While these may seem insignificant on first view, they do add up significantly in overall satisfication. Today we will be having a look at animations in the Magento 2 Checkout.

The Problem

Take for example, the way a customer progresses through the shipping step by default in Magento 2:

Immediately, you'll notice 2 things:

  • There's a sudden, jerky, upward movement on the page because of the differences in height between steps.
  • The problem above is exacerbated due to the fact that the original step contents are faded out, while the new step contents are faded in.

Improving things...

Thankfully, Clean Checkout already solves the first part. That shipping step doesn't have to be that long in the first place!

Perfection

The hard part has already been done, no reason to stop there. Here's the end result when we just hide our initial step and only use fading on the next step:

It's a subtle difference, but still quite noticeable.

In addition to all of the above, these steps have a configurable animation time, so that you can choose the best setting for your customers.