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