Nordstrom's Pop-In: Eats

Excuse the poor screen recording software, it made the conveyor belt very sluggish.

A gourmet snack themed pop-up shop

This is a website I helped develop while working for Nordstrom back in 2016. Pop-In sites only stayed up a month but you can see a screen recording of the functionality.

The conveyor belt

The layout for the belt uses flexbox. This allowed for the columnar, zigzag layout. It also reshuffled nicely for all screen sizes.

The auto-scroll would stop if the mouse moved over an item on the belt and started up again after the mouse moved off of the item (after a short delay, of course). The user can scroll with their mouse, too, which would also stop the auto-scroll. The scrolling movement was accomplished using requestAnimationFrame by animating the scrollLeft property.

The belt items randomize on load. This is to ensure items towards the end get visibility. There are a couple of items that needed to stay up front, like the description and the featured item Cherry Bombe magazine.