Custom Checkout

I am trying to create a custom checkout process with an animated progress bar.
And I was wondering if anyone has already done something similar and what the best practice is.

With a Flexbox container, I was able to create my “tasks” and edit them while they are positioned vertically. Then to animate and position them correctly, I just align them vertically and move the container for 100vw to the left to get to the next “task”. Demo Vimeo (not linking my project because it’s changing all the time)

However, this does not feel very good. There must be a better way to do this.