Pop-In: Eats
March 2016 Nordstrom Pop-In Shop is a snack-aholics dream come true.
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 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.