In 2018, I built the front-end for a web application for Shaw Floors called FloorFit.
It followed the wizard design pattern where users would make selections to proceed through 4 steps: Room, Features, Investment, and Styles. Each step had its own unique design and interactions, with a smooth fullscreen wipe animation between. Also, whenever the user had made all required selections on the current step, a pulsing proceed button would appear fixed in the corner of the screen until clicked, triggering the animation to move on to the next step.
I knew this application would involve retaining state on the client-side, because some of the user input would dictate the selection options of later steps. Because of this, I built the application with Vue.js and reached for Vuex as the store library. I styled the components with Less and created the timeline wipe animations with anime.js.
I also worked closely with a motion designer who used Adobe After Effects to create the pulsing proceed button animation. By using Lottie by Airbnb, I was able to integrate the animations into the browser and trigger them with JavaScript.