Klare

Vox Media Video Microsite

Leading into this year's Newfronts work, we were tasked with building a landing page for our video content. The only key requirements identified were that the site house the most important videos at full screen width and that they autoplay on scroll. And that it be done within a week.

A week is a tight turn around, but also a lot of creative license to build out a smart, interesting page to highlight this content. When we started the project, the only requirements I was given were that it be a one page microsite and that the main videos be full screen width and autoplay on scroll. To supplement this interactivity, I knew I wanted to incorporate some subtle CSS or SVG animations that would work well alongside the videos.

Since we hadn’t even decided on what the visual direction would look like, I started by building out a small framework for the layout, adding in content types I knew would exist (two video headings, a paragraph of copy, and the actual fullwidth videos). Because it was a fast turnaround, I also wanted to start by building this outside of Chorus, Vox Media’s CMS, as it would be faster for me to change layout and interactivity without having to contend with Chorus’ own CMS publishing features and highly specified CSS. I also knew I could work much faster compiling SCSS files together using Terminal and Sublime Text than using the CSS editor baked into Chorus.

After building the basic layout, I wanted to start with some animations, especially in the header area, and experimented with transitioning in the heading letters with a randomized y-axis translate.

gif of scrolling webpage

Basic flexbox grid SCSS


$m: 700px;

@mixin flexbox() {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

@mixin layout-justify {
  $justify: start, end, center, between, around;
  @each $value in $justify {
    .layout-justify-#{$value} {
      -webkit-justify-content: #{$value};
      -ms-justify-content: #{$value};
      justify-content: #{$value};
    }
  }
}

@mixin flex-basis {
  $widths: 25, 30, 50, auto;
  @each $width in $widths {
    @if $width == auto {
      .layout-width-auto {
        -webkit-flex-basis: $width;
        -ms-flex-basis: $width;
        flex-basis: $width;
      }
    } @else {
      .layout-width-#{$width} {
        -webkit-flex-basis: percentage($width/100);
        -ms-flex-basis: percentage($width/100);
        flex-basis: percentage($width/100);
      }
    }
  }
}

@supports(display: flex){
  @media screen and (min-width: $m) {
    .layout-container {
      @include flexbox();
    }
  }
  @include layout-justify();
  @include flex-basis();
}

After incorporating the assets from the visual direction into the microsite (thanks Jessica Paoli & Dayna Lee), it became clear that SVG line animations were the way to go.

Animation of lines being drawn under text

SVG Line Animation SCSS code


  $l: 300;

@keyframes line-offset {
  to { stroke-dashoffset: 0; }
}
.svg-line {
  stroke-dasharray: $l;
  stroke-dashoffset: $l;
  animation: line-offset 1.5s ease forwards 1s;
  &-long {
    animation-timing: 4s; 
    &er {
      animation-timing: 6s;
    }
  }
}

From there, it was just a matter of making small updates and moving content around until we reached a layout everyone was comfortable with.

Check out the live microsite.