Pop-In: Vans

August 2016 Pop-In Shop features my favorite shoes, Vans!

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

I love Vans and I had invested interest with this one for sure. Luckily I was handed off the proof of concept early which was a gift because I had time to do the entire experience myself.

Desktop and tablet experience

The shoe wall, as we called it, was an interlocking honeycomb. I wanted to make sure the site was performant so I didn't want to use transparent pngs for the hexagons or do one giant jpg of the wall. There are also two large half hexagons on the edges of the screen that link to editorials, so those needed to fit within the flow of the document as well. I decided to use floated SVG because it allowed the ability to use jpg and get the hexagonal shape with clip-path.

Clipping a hexagon shape with SVG.
<svg>
    <defs>
        <!-- hexagon shape -->
        <polygon id="hexagon" points="0,0.25 0.5,0 1,0.25 1,0.75 0.5,1 0,0.75"></polygon>
        <!-- clipPath definition using the hexagon shape -->
        <clipPath id="hexagon-clip" clipPathUnits="objectBoundingBox">
            <use xlink:href="hexagon"></use>
        </clipPath>
    </defs>

    <!-- the image with the clip-path -->
    <image xlink:href="shoe-hexagon.jpg" clip-path="url(#hexagon-clip)"/>
</svg>

Using svg has another major benefit; The hit area is defined by the clip-path. This means the hit area would be a hexagon instead of a rectangle. I learned, however, that applying a negative margin to svg with a clip-path reverts to using a rectangular hit area :( The negative margin was needed to stitch the hexagons together to make the honeycomb. To overcome this I turned the hit area into a circle using border-radius. There was a gap in each corner of the hexagon where the circle didn't cover but most users wouldn't notice.

Hover animation

The hover animation for the shoe hexagon resembles a coin spin. I thought this would be a fun way to interact with the honeycomb. The animation was made with CSS @keyframes and was triggered by an event listener because it needed to work on touch devices as well. I wanted to add a little bounce to the "coin" to resemble a coin box in Mario Bros. but to get that effect to look right it would have taken a considerable amount of time, which I didn't have.

Coin flip animation
@keyframes outer-spin {
    0% {
        transform: rotateY(180deg);
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        transform: rotateY(0);
    }
}

@keyframes inner-spin {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

.shoe-container {
    &.-in {
        .hover-content {
            opacity: 1;
            animation-name: outer-spin;

            .details {
                animation-name: inner-spin;
                animation-duration: .5s;
            }
        }
    }
}

The large half hexagon shapes used the same svg technique mentioned above. They were designed to flow in the document like the rest of the grid items but because the Photoshop document that I sliced the images from wasn't perfectly divisible by the column count meant that I had to take another approach. You may think "Why not just set the width and height on them?". That wouldn't work with the way the svg is setup because the clip wouldn't match up with the image. If the half hexagon needed to be a little larger to make the clip match then it would cause the row to wrap too soon. I ended up positioning them absolutely and offsetting the grid items around them. The empty half hexagons that start and end every other row are pseudo before and after elements.

Mobile version

The mobile version uses a completely different layout. Instead of the shoe wall it features two sliders with the categories in the middle. I didn't want the user to have to download two sets of dom layouts so I used Handlebars to inject them. If the user resizes their browser and hits the different layout breakpoint then the container's inner HTML gets destroyed and the new layout would get injected into it.