Pop-In: Eats

March 2016 Nordstrom Pop-In Shop is a snack-aholics dream come true.

The screen capture software was a bit sluggish while recording and the live site had much better performance with no visible jank.

The theme of Eats is snack food and the design is meant to resemble a grocery store. The main experience is a conveyor belt that auto-scrolls to show a selection of snacks and accoutrements. Hovering the mouse over one reveals an alternate image and descriptive text. My credit was in creating the conveyor belt.

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 start 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.