Place order animation

During the checkout migration project for Sainsbury's Argos, we were modernising all aspects of the checkout, so we naturally wanted to improve the final stage of that process.

The previous design was a basic looping GIF within an overlay. We wanted to push further and opted for a React, SVG & CSS only solution.

For launch we opted for an easily customisable default animation along with a Christmas variant. I designed both variants in Sketch and exported the assets as SVG files which easily integrate into our React codebase.

This enabled us to easily apply seasonal variation and allow bespoke theming for particular events such as Christmas, Halloween, Mental Health awareness week, or even brand specific occasions such as anniversaries to name a few.