Pop-In: De Soleil

May 2016 Nordstrom Pop-In Shop is all about surf and sand.

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 De Soleil was beach related and the design is high saturated colors with a focus on Mediterranean style. The user experience is focused on integrating editorial content with related product. The challenge was in showing both at the same time while keeping the display uncluttered. I accomplished this by revealing the editorial within the main header and then bubbling the related product to the top. Unfortunately I couldn't show the product in the video above because I recorded it after the shop was taken down and the product was no longer available.

Revealing content

I sold the revealing content idea by animating the image slider from half screen to full screen. Without the animation the transition from slider to editorial would be too abrupt.

Part of the animation is the shape morphs in the corners. They help with the transition by adding a blending effect.

The shape morphs are animated canvas elements.

Each slide has different shapes with slightly different colored textures. I decided to create a reusable component that ingests SVGs for the shapes and imgs for the repeating texture. Any Pop-In that needs shape morphing can now use this component. The component parses the points of two SVGs, the start state and the end state, interpolates the difference between them and then draws them to the canvas. I used TweenLite to help with the interpolation which also added easing to the animation.

Image slider

I built the image slider for the previous Pop-In which was for AĆ©sop. I didn't do a post for that one so I'll highlight it here. The slider is also a reusable component and it is featured heavily in later Pop-Ins. A unique feature of the slider is the customizable slide change animation. For De Soleil I used what I call the breeze animation which complimented the beach theme.

The movement is accomplished using CSS @keyframes and animating the transform property. Using this method as opposed to doing it in JavaScript has better performance and is easier to maintain; adding a new animation is as simple as updating the CSS.