cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <!--Learn more about this project at the Media Temple blog: http://mediatemple.net/blog/tips/building-an-animated-web-project-using-a-javascript-timeline/ -->

<!-- Wrapper
--- Contains everything and Javascript-ed to be a square the height of the browser
-->

<div class="wrapper">

    <!-- Container
    --- Contains all the .motion- and .text- "scenes", which are absolutely positioned
    --- The .motion- and .text- "scenes" are ordered to establish
    --- proper visual layering without resorting to z-index madness 
    -->

    <div class="container  slide-1">
      
        <!-- Motion 1
        --- Table scene with the red background
        -->
      
        <div class="motion-1 background">
        
            <div class="motion-1--browser">
                <div class="nav">
                </div>
            </div>
            
            <!-- this is the state with the blue tables and lines in it -->
            <div class="motion-1--table">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
            
            
            <!-- this is the state with all the table images dropped in -->
            <div class="motion-1--image">
                <ul>
                    <li></li> <!-- bottom gutter -->
                    <li></li> <!-- left middle gutter -->
                    <li></li> <!-- right middle gutter -->
                    <li></li> <!-- content footer -->
                    <li> <!-- content left menu -->
                        <table class="decoration">
                            <tr>
                                <td><div></div></td>
                            </tr>
                            <tr>
                                <td></td>
                            </tr>
                            <tr>
                                <td><div></div></td>
                            </tr>
                            <tr>
                                <td></td>
                            </tr>
                            <tr>
                                <td><div></div></td>
                            </tr>
                            <tr>
                                <td></td>
                            </tr>
                            <tr>
                                <td><div></div></td>
                            </tr>
                            <tr>
                                <td></td>
                            </tr>
                            <tr>
                                <td><div></div></td>
                            </tr>
                            <tr>
                                <td></td>
                            </tr>
                        </table>
                    </li>
                    <li> <!-- content right -->
                        <table class="decoration">
                            <tr>
                                <td><div></div></td>
                            </tr>
                            <tr>
                                <td></td>
                            </tr>
                            <tr>
                                <td><div></div></td>
                            </tr>
                            <tr>
                                <td></td>
                            </tr>
                            <tr>
                                <td><div></div></td>
                            </tr>
                            <tr>
                                <td></td>
                            </tr>
                            <tr>
                                <td><div></div></td>
                            </tr>
                            <tr>
                                <td></td>
                            </tr>
                            <tr>
                                <td><div></div></td>
                            </tr>
                            <tr>
                                <td></td>
                            </tr>
                        </table>
                    </li> 
                    <li></li> <!-- top left gutter -->
                    <li> <!-- top middle menu -->
                        <table class="decoration">
                            <tr>
                                <td><div></div></td>
                                <td></td>
                            </tr>
                        </table>
                    </li> 
                    <li></li> <!-- top right gutter -->
                </ul>
            </div>
        
        </div>
        
        <!-- Text 1
        --- First text scene with <table> copy and black background
        -->
        
        <div class="text  text-1  background">
            
            <p class="code">&lt;!-- From --&gt;<br>
            <span>&lt;table&gt;</span><br> 
            &lt;!-- layouts --&gt;</p>  
                    
        </div>
        
        <!-- Text 3
        --- Final text section with Call To Action and link
        -->
        
        <div class="text  text-3  background">
            
            <p class="header">Media Temple</p>
            <p>State of the art hosting<br>
            for developers since 1998.</p>
            
            <a href="http://mediatemple.net/webhosting?utm_source=codepen&utm_medium=banner_justins_codepen&utm_content=275x275&utm_campaign=general" title="(mt) Hosting Plans"><p>View hosting plans</p></a>
            
        </div> <!-- /text-2 -->
        
        <!-- Motion 2
        --- Responsve browser scene with blue background
        -->
      
        <div class="motion-2 background">
        
            <!-- Black nav bar and black bezel wrapping around browser content -->
        
            <div class="motion-2--device">
                
                <!-- Contents contained withing browser and device bezel -->
            
                <div class="motion-2--content">
                
                    <!-- Responsive site hero, blue -->
                
                    <div class="motion-2--hero">
                        
                        <table>
                            <tr>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td>
                                    <span></span>
                            </td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td>
                                    <span></span>
                            </td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td>
                                    <span></span>
                            </td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                            </tr>
                        </table>
                        
                    </div> <!-- /motion-2--hero -->
                    
                    <!-- Responsive site content, grey and below the fold -->
                    
                    <div class="motion-2--below-fold">
                        
                        <table class="main-content">
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td>
                                <table class="sub-content">
                                    <tr>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span></span>
                                        </td>
                                        </tr>
                                    <tr>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span></span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <span></span>
                                        </td>
                                    </tr>
                                    <tr></tr>
                                </table>
                                </td>
                                <td></td>
                            </tr>
                            <tr>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>
                        </table>
                        
                    </div> <!-- /motion-2--below-fold -->
                
                </div> <!-- /motion-2--content -->
            
            </div> <!-- /motion-2--device -->
            
        </div><!-- /motion-2 -->
        
        <!-- Text 2
        --- Second text scene with @media copy and black background
        -->
        
        <div class="text  text-2  background">
            
            <p class="code">// ...to<br>
            <span>@media</span><br>
            // queries.</p>
            
        </div> <!-- /text-2 -->
        
        <!-- Images
        --- Replay and (mt) logo images
        -->
        
        <img class="logo" src="http://bin.mediatemple.net/codepen-ad-march-2014/mt-logo-white.svg" />
        
      <img class="replay" id="replay" src="http://bin.mediatemple.net/codepen-ad-march-2014/replay.svg" />
        
        <img class="leave" id="leave" src="http://bin.mediatemple.net/codepen-ad-march-2014/leave-arrow.svg" />
    
    </div> <!--/.container-->

</div>

            
          
!
            
              /* Bounce In
* The main keyframe animation
* -------------------------------------------------*/

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    .transform(scale(.95));
  }
  
  25% {
    opacity: 1;
    filter: alpha(opacity=100);
  }

  50% {
    .transform(scale(1));
  }

  70% {
    .transform(scale(.95));
  }

  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    .transform(scale(1));
  }
}

@-moz-keyframes bounceIn {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    .transform(scale(.95));
  }
  
  25% {
    opacity: 1;
    filter: alpha(opacity=100);
  }

  50% {
    .transform(scale(1));
  }

  70% {
    .transform(scale(.95));
  }

  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    .transform(scale(1));
  }
}

@-o-keyframes bounceIn {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    .transform(scale(.95));
  }
  
  25% {
    opacity: 1;
    filter: alpha(opacity=100);
  }

  50% {
    .transform(scale(1));
  }

  70% {
    .transform(scale(.95));
  }

  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    .transform(scale(1));
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    filter: alpha(opacity=0);
    .transform(scale(.95));
  }
  
  25% {
    opacity: 1;
    filter: alpha(opacity=100);
  }

  50% {
    .transform(scale(1));
  }

  70% {
    .transform(scale(.95));
  }

  100% {
    opacity: 1;
    filter: alpha(opacity=100);
    .transform(scale(1));
  }
}

/* This is a list of custom class and mixins I use.
* Does not support IE < 10
* -------------------------------------------------*/

.border-box {
    -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
            box-sizing:border-box;
}

.border-radius (@radius) {
    -webkit-border-radius: @radius;
        -moz-border-radius: @radius;
            -o-border-radius: @radius;
                border-radius: @radius;
}

.box-shadow (@shadow) {
    -moz-box-shadow:@shadow;
        -webkit-box-shadow:@shadow;
            box-shadow:@shadow;
}

.standard-background (@background-image) {
    background:url(@background-image) center center no-repeat transparent;
}

.transition (@transition) {
    -webkit-transition:@transition;
        -moz-transition:@transition;
            -o-transition:@transition;
                transition:@transition;
}

.transition-delay(@transitionDelay) {
    -webkit-transition-delay:@transitionDelay;
        -moz-transition-delay:@transitionDelay;
            -ms-transition-delay:@transitionDelay;
                -o-transition-delay:@transitionDelay;
                    transition-delay:@transitionDelay;
}

.animation-delay(@animationDelay) {
    -webkit-animation-delay:@animationDelay;
        -moz-animation-delay:@animationDelay;
            -o-animation-delay:@animationDelay;
                animation-delay:@animationDelay;
}

.animation-fill-mode(@animationFill){
    -webkit-animation-fill-mode: @animationFill;
        -moz-animation-fill-mode: @animationFill;
            -o-animation-fill-mode: @animationFill;
                animation-fill-mode: @animationFill;
}

.transform(@transformation){
    -webkit-transform:@transformation;
        -moz-transform:@transformation;
            -o-transform:@transformation;
                -ms-transform:@transformation;
                    transform:@transformation;
}

.animation(@animation){
    -webkit-animation:@animation;
        -moz-animation:@animation;
            -o-animation:@animation;
                animation:@animation;
}

.transform-origin(@transformOrigin){
    -webkit-transform-origin:@transformOrigin;
        -moz-transform-origin:@transformOrigin;
            -o-transform-origin:@transformOrigin;
                -ms-transform-origin:@transformOrigin;
                    transform-origin:@transformOrigin;
}

.standard-transition {
    .transition(all .15s linear);
}

.hand {
    cursor:pointer;
    cursor:hand;
}

.clearfix {
    clear:both;
}

/* Brand colors
 * ____________________________________________________________ */

@red: #f26767;
@frost: #f6f6f6;
@silver: #f4f4f4;
@graphite: #282B2D;
@darkGray: #ccc;
@blue-gray: #80abc8;
@light-blue: #9fe0f3;
@purple: #9e7fb9;
@yellow: #ffd02b;
@green: #48e0a4;
@light-green:#67e5b3;

body {
    overflow:hidden;
    background-color:@graphite;
}

.dev { //remove before production
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-250px;
  margin-top:-250px;
}

/* Basic structure
 * ____________________________________________________________ */

.wrapper {
    position:relative;
    overflow:hidden;
}

.container {
    opacity:1;
    zoom:1;
    filter: alpha(opacity=100);
    width:100%;
    height:100%;
    overflow:hidden;
    .logo {
        position:absolute;
        bottom:0;
        right:5%;
        width:15%;
        height:15%;
        display:block;
        zoom:1;
        opacity:.5;
        filter: alpha(opacity=50);
    }
    .replay {
        position:absolute;
        top:5%;
        right:5%;
        width:10%;
        height:10%;
        display:block;
        zoom:1;
        opacity:0;
        filter: alpha(opacity=0);
        .standard-transition;
    }
    .replay.js-show {
        opacity:.5;
        filter: alpha(opacity=50);
        .hand;
        &:hover {
            opacity:1;
            filter: alpha(opacity=100);
        }
    }
    .leave {
        position:absolute;
        bottom:2.2%;
        right:22%;
        width:10%;
        height:10%;
        display:block;
        zoom:1;
        opacity:0;
        filter: alpha(opacity=0);
        .standard-transition;
    }
}

/* These styles are only applied during the animation, not the last CTA */

.container:not(.slide-5) {
    .hand; // make the whole thing look clickable only during animation
    &:hover {
        .leave {
            opacity:.5;
            filter: alpha(opacity=50);
        }
    }
}



.container.js-hide {
    opacity:0;
    filter: alpha(opacity=0);
    .standard-transition;
}

.background {
  width:100%;
  height:100%;
  position:absolute;
  .standard-transition;
}

.text {
    p {
         color:@silver;
          line-height:1.5;
          letter-spacing:1px;
          font-family:'BrandonText', helvetica, arial;
    }
    .code {
        //position:absolute;
        //top:50%;
        //left:50%;
        //.transform(translate(-50%, -50%));
        //.transform-origin(top left);
     
    }
}

/* Scene positioning
 * Scenes are positioned by adding .slide- classes to .container
 * ____________________________________________________________ */

.container.slide-1 {
    .text-1 {
        top:0;
        left:0;
    }
    .motion-1 {
        top:0;
        left:0;
    }
    .text-2 {
        top:0;
        left:100%;
    }
    .motion-2 {
        top:0;
        left:200%;
    }
    .text-3 {
        top:0;
        left:300%;
    }
}

.container.slide-2 {
    .text-1 {
        top:100%;
    }
    .motion-1 {
        left:0;
    }
    .text-2 {
        top:0;
        left:100%;
    }
    .motion-2 {
        left:100%;
    }
    .text-3 {
        left:200%;
    }
}

.container.slide-3 {
    .text-1 {
        left:-100%;
    }
    .motion-1 {
        left:-100%;
    }
    .text-2 {
        left:0;
    }
    .motion-2 {
        left:0;
    }
    .text-3 {
        top:0;
        left:0;
    }
    
}

.container.slide-4 {
    .text-1 {
        left:-100%;
    }
    .motion-1 {
        left:-100%;
    }
    .text-2 {
        left:0;
    }
    .motion-2 {
        left:0;
    }
    .text-3 {
        left:0;
    }
}

.container.slide-5 {
    .text-1 {
        left:-100%;
    }
    .motion-1 {
        left:-100%;
    }
    .text-2 {
        left:-100%;
    }
    .motion-2 {
        left:0;
    }
    .text-3 {
        left:0;
    }
}

/* Text 1
 * First console section with <table> text
 * ____________________________________________________________ */

/* Applies table layout to text scene in order to middle-align text vertically */
.special-code-text {
    display: table-cell; 
    vertical-align: middle; 
    //text-align: center; 
    text-align:left;
    padding-left:15%;
}

.text-1 {
    background-color:@graphite;
    display:table;
    .transition(top .3s cubic-bezier(.67,.01,1,1));
  
    p {
        .special-code-text;
        span {
            color:@yellow;
        }
    }
  
}


/* Motion 1
 * Table-themed section with red background
 * ____________________________________________________________ */

/* All the stuff for the first scene, motion-1*/

/* The table layout I use a few times during the first scene */

.table-1{ // bottom gutter
    width:100%;
    height:30%;
    bottom:0;
    left:0;
}
.table-2{ //left middle gutter
    width:25%;
    height:50%;
    bottom:30%;
    left:0;
}
.table-3{ //right middle gutter
    width:25%;
    height:50%;
    bottom:30%;
    left:75%;
}
.table-4{ //content footer
    width:50%;
    height:10%;
    bottom:30%;
    left:25%;
}
.table-5{ // content left menu
    width:15%;
    height:40%;
    bottom:40%;
    left:25%;
}
.table-6{ // content right
    width:35%;
    height:40%;
    bottom:40%;
    left:40%;
}
.table-7{ //top left gutter
    width:25%;
    height:10%;
    bottom:80%;
    left:0%;
}
.table-8{ //top middle menu
    width:50%;
    height:10%;
    bottom:80%;
    left:25%;
}
.table-9{ //top right gutter
    width:25%;
    height:10%;
    bottom:80%;
    left:75%;
}

.motion-1 {
  background-color:@red;
  overflow:hidden;
}


/* Browser 
 * Empty browser background eventually populated with table layout and drop-in images
 * Opacity = 0 at first, then it's animated into opacity = 1 with JS */

.motion-1--browser {
    opacity:0;
    filter: alpha(opacity=0);
    zoom:1;
    
    width:60%;
    height:60%;
    position:absolute;
    background-color:@frost;
    
    //.transform(scale(.8) translate(-50%, -50%));
    .transform(scale(.8));
    top:0;
    right:0;
    left:0;
    bottom:0;
    margin:auto;
    
    .nav {
        width:100%;
        height:10%;
        background-color:@graphite;
        position:absolute;
        top:0;
        left:0;
        font-size:30px;
        .close {
            display:block;
            position:absolute;
            color:@red;
            font-weight:bold;
            right:2%; // need to figure out this placement
            top:-11%; // need to figure out this placement
            .transform(rotate(45deg));        
        }
    }
}

/* Add JS class to animate the browser into place initially with opacity = 1*/

.motion-1--browser.js-active {
    opacity:1;
    filter: alpha(opacity=100);
    .animation(bounceIn .25s 1 linear);
    .transform(scale(1));
    .standard-transition;
}

/* Add JS class to animate the browser to width and height 100%, before transition to text-2  */

.motion-1--browser.js-make-big {
    width:100%;
    height:100%;
    .transform(rotate(90deg));
}


/* Table piece
 * Animates into place on a layer above the empty browser background, .motion-1--browser */

.motion-1--table {

    width:60%;
    height:60%;
    position:absolute;
    background-color:transparent;
    top:0;
    right:0;
    left:0;
    bottom:0;
    margin:auto;
  
    ul{
        list-style-type:none;
    }
    li {
        position:absolute;
        opacity:0;
        filter: alpha(opacity=0);
        zoom:1;
        .border-box;
        
        .transform(scale(.8));
        
        .top {
            border-top:2px solid @silver;
        }
        .right {
            border-right:2px solid @silver;
        }
        .bottom {
            border-bottom:2px solid @silver;
        }
        .left {
            border-left:2px solid @silver;
        }
        
        &:nth-child(1){ // bottom gutter
            .table-1;
            background-color:@light-blue;
            .top;
        }
        &:nth-child(2){ //left middle gutter
            .table-2;
            background-color:@light-blue;
            .top;
            .right;
            .bottom;
            /* .left; */
        }
        &:nth-child(3){ //right middle gutter
            .table-3;
            background-color:@light-blue;
            .top;
            /* .right; */
            .bottom;
            .left;
        }
        &:nth-child(4){ //content footer
            .table-4;
            background-color:@light-blue;
            .top;
            .right;
            .bottom;
            .left;
        }
        &:nth-child(5){ // content left menu
            .table-5;
            background-color:@light-blue;
            .top;
            .right;
            .bottom;
            .left;
        }
        &:nth-child(6){ // content right
            .table-6;
            background-color:@light-blue;
            .top;
            .right;
            .bottom;
            .left;
        }
        &:nth-child(7){ //top left gutter
            .table-7;
            background-color:@light-blue;
            /* .top; */
            .right;
            .bottom;
            /* .left; */
        }
        &:nth-child(8){ //top middle menu
            .table-8;
            background-color:@light-blue;
            /* .top; */
            .right;
            .bottom;
            .left;
        }
        &:nth-child(9){ //top right gutter
            .table-9;
            background-color:@light-blue;
            /* .top; */
            /* .right; */
            .bottom;
            .left;
        }
    }// li
}

.motion-1--table.js-active {
    
    .tableAnimation {
        .animation(bounceIn .25s 1 linear);
        .animation-fill-mode(forwards);
    }

    .tableFinal {
        opacity:1;
        filter: alpha(opacity=100);
        .transform(scale(1));
    }
            
    li {
        
        /* All table "cells" are animated into place */
        .tableAnimation;
        
        /* TABLE CELLS IN ORDER OF APPEARANCE */
        /* Delay animation so the cells appear one at a time */
        
        &:nth-child(7){ //top left gutter
            .animation-delay(0s);
        }
        
        &:nth-child(8){ //top middle menu
            .animation-delay(.15s);
        }
        
        &:nth-child(9){ //top right gutter
            .animation-delay(.3s);
        }
        
        &:nth-child(2){ //left middle gutter
            .animation-delay(.45s);     }
        
        &:nth-child(5){ // content left menu
            .animation-delay(.6s);
        }
        
        &:nth-child(6){ // content right
            .animation-delay(.75s);
        }
        
        &:nth-child(3){ //right middle gutter
            .animation-delay(.9s);
        }
        
        &:nth-child(4){ //content footer
            .animation-delay(1.1s);
        }
        
        &:nth-child(1){ // bottom gutter
            .animation-delay(1.25s);
        }
    }
}

.motion-1--table.js-hide {
    display:none;
}

/* Images
 * These pieces drop down from above the frame into position within the fake table cells */

.motion-1--image{
    width:60%;
    height:60%;
    position:absolute;
    background-color:transparent;
    //top:50%;
    //left:50%;
    //.transform(translate(-50%, -50%));
    top:0;
    right:0;
    left:0;
    bottom:0;
    margin:auto;
  
  ul{
    list-style-type:none;
  }
  li {
    
    .fatBottom {
        bottom:200%;
    }
    
    position:absolute;
    .transition(bottom .15s linear);
    
    /* Use transition delay to drop these fake image pieces in one at a time */
    
    &:nth-child(1){ // bottom gutter
        .table-1;
        background-color:@silver;
        .fatBottom;
        .transition-delay(0s);
        
    }
    &:nth-child(2){ //left middle gutter
        .table-2;
        background-color:@silver;
        .fatBottom;
        .transition-delay(.15s);
    }
    &:nth-child(3){ //right middle gutter
        .table-3;
        background-color:@silver;
        .fatBottom;
        .transition-delay(.3s);
                
    }
    &:nth-child(4){ //content footer
        .table-4;
        background-color:@blue-gray;
        .fatBottom;
        .transition-delay(.45s);
    }
    &:nth-child(5){ // content left menu
        .table-5;
        background-color:@darkGray;
        .fatBottom;
        .transition-delay(.6s);
        
        .border-box;
        padding:3% 2%;
        
        /* Fake browser content .decoration */
        .decoration {
            width:100%;
            height:100%;
            opacity:0;
            filter: alpha(opacity=0);
            .transform(scale(.8));
            tr {
                height:8%;
                &:nth-child(odd){
                    td {
                        background-color:#ffffff;
                    }
                }
                &:last-child {
                    height:28%;
                }
            }
        }
        .decoration.js-active {
            .animation(bounceIn .25s 1 linear);
            .animation-fill-mode(forwards);
            opacity:1;
            filter: alpha(opacity=100);
        }
        
    }
    &:nth-child(6){ // content right
        .table-6;
        background-color:#ffffff;
        .fatBottom;
        .transition-delay(.75s);
        
        .border-box;
        padding:3%;
        
        /* Fake browser content .decoration */
        .decoration {
            width:100%;
            height:100%;
            opacity:0;
            filter: alpha(opacity=0);
            .transform(scale(.8));
            tr {
                &:nth-child(1){
                    height:30%;
                    td {
                        div {
                            background-color:@red;
                            width:60%;
                            height:100%;
                        }
                    }
                }
                &:nth-child(2){
                    height:8%;
                }
                &:nth-child(3){
                    height:12%;
                    td {
                        div {
                            background-color:@graphite;
                            width:72%;
                            height:100%;
                        }
                    }
                }
                &:nth-child(4){
                    height:7%;
                }
                &:nth-child(5){
                    height:7%;
                    td {
                        div {
                            background-color:@graphite;
                            width:56%;
                            height:100%;
                        }
                    }
                }
                &:nth-child(6){
                    height:7%;
                }
                &:nth-child(7){
                    height:7%;
                    td {
                        div {
                            background-color:@graphite;
                            width:64%;
                            height:100%;
                        }
                    }
                }
                &:nth-child(8){
                    height:7%;
                }
                &:nth-child(9){
                    height:7%;
                    td {
                        div {
                            background-color:@purple;
                            width:52%;
                            height:100%;
                        }
                    }
                }
                &:nth-child(10){
                    height:7%;
                }
            }
        }
        
        .decoration.js-active {
            .animation(bounceIn .25s 1 linear);
            .animation-fill-mode(forwards);
            //opacity:1;
        }
        
        
    }
    &:nth-child(7){ //top left gutter
        .table-7;
        background-color:@silver;
        .fatBottom;
        .transition-delay(.9s);
    }
    &:nth-child(8){ //top middle menu
        .table-8;
        background-color:@blue-gray;
        .fatBottom;
        .transition-delay(1.1s);
        
        .border-box;
        padding:3.5% 2%;
        
        /* Fake browser content .decoration */
        .decoration {
            width:100%;
            height:100%;
            opacity:0;
            filter: alpha(opacity=0);
            .transform(scale(.8));
            tr {
                width:100%;
                height:100%;
                
                td {
                    &:nth-child(1){
                        background-color:#ffffff;
                        width:48%;
                    }
                    &:nth-child(2){
                        width:52%;
                    }
                }
            }
        }
        .decoration.js-active {
            .animation(bounceIn .25s 1 linear);
            .animation-fill-mode(forwards);
            opacity:1;
            filter: alpha(opacity=100);
        }
    }
    &:nth-child(9){ //top right gutter
        .table-9;
        background-color:@silver;
        .fatBottom;
        .transition-delay(1.25s);
    }
  }// li
}

/* BAM! Drop these fake image pieces into the table at the correct .table- locations */
.motion-1--image.js-active {
    li {
        &:nth-child(1){ // bottom gutter
            .table-1;
        }
        &:nth-child(2){ //left middle gutter
            .table-2;
        }
        &:nth-child(3){ //right middle gutter
            .table-3;
        }
        &:nth-child(4){ //content footer
            .table-4;
        }
        &:nth-child(5){ // content left menu
            .table-5;
        }
        &:nth-child(6){ // content right
            .table-6;
        }
        &:nth-child(7){ //top left gutter
            .table-7;
        }
        &:nth-child(8){ //top middle menu
            .table-8;
        }
        &:nth-child(9){ //top right gutter
            .table-9;
        }
    }// li
    //.transition(all .25s ease-out);
    // needs to match speed of sliding, which is .standard
    .standard-transition;
}

.motion-1--image.js-make-big {
    width:100%;
    height:100%;
    .transform(rotate(90deg));
}

/* Text 2
 * Second console portion, with @media text
 * ____________________________________________________________ */
 
.text-2 {
    background-color:@graphite;
    display:table;
    p {
        .special-code-text;
        .transition(all .1s ease-in);
        span {
            color:@red;
        }
    }
}

.text-2.js-shrinkDown {
    width:60%;
    height:60%;
    top:0;
    right:0;
    left:0;
    bottom:0;
    margin:auto;
    .border-radius(5px);
    p {
        opacity:0;
        filter: alpha(opacity=0);
    }
}

.text-2.js-hide {
    display:none;
}


/* Motion 2
 * Responsive-themed section with blue background
 * ____________________________________________________________ */

.motion-2 {
  background-color:@light-blue;
}

/* This is the browser background
 * Also makes up the nav and device bezel that wraps .motion-2-content */

.motion-2--device {
    
    width:60%;
    height:60%;
    position:absolute;
    background-color:@graphite;
    .border-box;
    .standard-transition;
    
    .border-radius(5px);
    overflow:hidden;
    
    top:0;
    right:0;
    left:0;
    bottom:0;
    margin:auto;
}

/* Wraps the fake browser content
 * Animated into place */

.motion-2--content {
    zoom:1;
    opacity:0;
    filter: alpha(opacity=0);
    width:100%;
    height:90%;
    margin-top:10%;
    background-color:@silver;
    .border-radius(0);
    .transform(scale(.8));
    
}

/* Animate into place */

.motion-2--content.js-active {
    opacity:1;
    filter: alpha(opacity=100);
    .animation(bounceIn .25s 1 linear);
    .transform(scale(1));
    .standard-transition;
}

/* Blue hero in the fake browser content */

@left-margin:6%;

.motion-2--hero {
    height:45%;
    width:100%;
    background-color:@blue-gray;
    table {
        opacity:0;
        filter: alpha(opacity=0);
        width:100%;
        height:100%;
        .transform(scale(.8));
        tr {
            td {
                &:nth-child(1){
                    width:@left-margin;
                }
                &:nth-child(2){
                    width:94%;
                }
            }
            &:nth-child(1){
                height:25%;
            }
            &:nth-child(2){
                height:14%;
                span {
                    display:block;
                    width:60%;
                    height:100%;
                    background-color:@silver;
                }
            }
            &:nth-child(3){
                height:9%;
            }
            &:nth-child(4){
                height:9%;
                span {
                    display:block;
                    width:52%;
                    height:100%;
                    background-color:@silver;
                }
            }
            &:nth-child(5){
                height:9%;
            }
            &:nth-child(6){
                height:9%;
                span {
                    display:block;
                    width:48%;
                    height:100%;
                    background-color:@silver;
                }
            }
            &:nth-child(7){
                height:25%;
            }
        }
    }
    table.js-active {
        .animation(bounceIn .25s 1 linear);
        .animation-fill-mode(forwards);
    }
}

/* Content below the fold in fake browser content */

.motion-2--below-fold{
    height:55%;
    width:100%;
    
    /* Table that includes the red block and another table with black lines */
    
    table.main-content {
        opacity:0;
        filter: alpha(opacity=0);
        width:100%;
        height:100%;
        .transform(scale(.8));
        tr {
            &:nth-child(1){
                height:18%;
            }
            &:nth-child(2){
                height:64%;
                td {
                    &:nth-child(2){
                        background-color:@red;
                    }
                }
            }
            &:nth-child(3){
                height:18%;
            }
        }
        td {
            &:nth-child(1){
                width:@left-margin;
            }
            &:nth-child(2){
                width:41%;
            }
            &:nth-child(3){
                width:@left-margin;
            }
            &:nth-child(4){
                width:41%;
            }
            &:nth-child(5){
                width:@left-margin;
            }
        }
    }
    table.main-content.js-active{
        .animation(bounceIn .25s 1 linear);
        .animation-fill-mode(forwards);
    }
    
    /* Sub table that contains the black lines, wrapped in table.main-content */
        
    table.sub-content {
        width:100%;
        height:100%;
        .standard-transition;
        tr {
            &:nth-child(1){
                height:20%;
            }
            &:nth-child(2){
                height:14%;
                span {
                    display:block;
                    width:70%;
                    height:100%;
                    background-color:@graphite;
                }
            }
            &:nth-child(3){
                height:9%;
            }
            &:nth-child(4){
                height:14%;
                span {
                    display:block;
                    width:54%;
                    height:100%;
                    background-color:@graphite;
                }
            }
            &:nth-child(5){
                height:9%;
            }
            &:nth-child(6){
                height:14%;
                span {
                    display:block;
                    width:64%;
                    height:100%;
                    background-color:@graphite;
                }
            }
            &:nth-child(7){
                height:20%;
            }
        }
    }
}

/* Responsive transformation 1: iPhone
 * Apply JS class to device
 * Cause it and its contents to transform into iPhone shape */

.motion-2--device.js-transform-1 {
    width:28%;
    height:50%;
    padding:6% 2%;
    
    .motion-2--content {
        width:100%;
        height:100%;
        margin-top:0;
    }
    
    .motion-2--hero {
        table {
            tr {
                td {
                    &:nth-child(1){
                        width:10%;
                    }
                    &:nth-child(2){
                        width:90%;
                    }
                }   
                &:nth-child(2){
                    span {
                        width:80%;
                    }
                }
                &:nth-child(4){
                    span {
                        width:72%;
                    }
                }
                &:nth-child(4){
                    span {
                        width:68%;
                    }
                }
            }
        }
    }
    .motion-2--below-fold {
        table.main-content {
            td {
                &:nth-child(1){
                    width:10%;
                }
                &:nth-child(2){
                    width:80%;
                }
                &:nth-child(3){
                    width:0;
                }
                &:nth-child(4){
                    width:0;
                }
                &:nth-child(5){
                    width:10%;
                }
            }
        }
        table.sub-content {
            opacity:0;
            filter: alpha(opacity=0);
            width:0;
        }
    }
}

/* Responsive transformation 2: iPad
 * Apply JS class to device
 * Cause it and its contents to transform into iPad shape */

.motion-2--device.js-transform-2 {
    width:50%;
    height:60%;
    padding:3%;
    
    .motion-2--content {
        width:100%;
        height:100%;
        margin-top:0;
    }
    
    .motion-2--below-fold {
        table.main-content {
            td {
                &:nth-child(1){
                    width:@left-margin;
                }
                &:nth-child(2){
                    width:41%;
                }
                &:nth-child(3){
                    width:@left-margin;
                }
                &:nth-child(4){
                    width:41%;
                }
                &:nth-child(5){
                    width:@left-margin;
                }
            }
        }
        table.sub-content {
            opacity:1;
            filter: alpha(opacity=0);
            width:100%;
        }
    }
}

/* Transition to final scene
 * Apply class to make black bezel background expand to width and height 100%
 * Scale contents down to 0 */

.motion-2--device.js-shrinkDown {
    width:100%;
    height:100%;
    .border-radius(0);
    .motion-2--content {
        
        .transform(scale(0));
        .transform-origin(center center);
    }
}

/* Fade out .motion-2, which is covering up the final .text-3 scene */

.motion-2.js-hide {
    opacity:0;
    filter: alpha(opacity=0);
}

/* And then make it display:none, so user can interact with buttons on .text-3 */

.motion-2.js-kill {
    display:none;
}

/* Text 3
 * The final CTA and messaging
 * ____________________________________________________________ */

.text-3 {
  background-color:@graphite;
  .border-box;
  padding:15% 10% 10% 10%;
    p {
        margin-bottom:10%;
    }
    p.header{
        font-weight:bold;
        margin-bottom:5%;
    }
    a {
        opacity:0;
        filter: alpha(opacity=0);
        .transform(scale(.8));
        display:block;      
        background-color:@green;
        text-decoration:none;
        text-align:center;
        .standard-transition;
        &:hover {
            background-color:@light-green;
        }
        p {
            padding:10%;
            color:@graphite;
            text-decoration:none;
            font-weight:bold;
        }
    }
}

/* After .motion-2 fades away, fade in .text-3 contents */

.text-3.js-active {
    a {
        opacity:1;
        filter: alpha(opacity=100);
        .animation(bounceIn .25s 1 linear);
        .animation-fill-mode(forwards);
        .transform(scale(1));
        &:hover {
            .transform(scale(1));
        }
    }
}
            
          
!
            
              
var wrapper = $('.wrapper');
var container = $('.container');
// var clickable = $('.slide-1, .slide-2, .slide-3, .slide-4');
fontSize = '';
codeFontSize = '';
headerFontSize = '';
ctaFontSize = '';

// This array sets up the animation steps
// time: number of milliseconds before adding the class
// step: the name of the class to add to the element
// selector: the name of the element that you're applying the class to

var animations = [
    {
        // Length of time that we read .text-1
        // Slides the <table> scene with red background
        time:2000,
        step:"slide-2",
        selector:'.container'
    },
    {
        // Pops the browser wrapper into place
        time:250,
        step:"js-active",
        selector:'.motion-1--browser'
    },
    {
        // Pops the table layout into place
        time:250,
        step:"js-active",
        selector:'.motion-1--table'
    },
    {
        time:1500,
        step:"js-active",
        selector:'.motion-1--image'
    },
    {
        // Populate the tabular browser with fake content
        time:1500,
        step:"js-active",
        selector:'.motion-1--image .decoration'
    },
    {
        // Expand the browser and its contents to the size of the container
        time:1500,
        step:"js-make-big",
        selector:'.motion-1--browser, .motion-1--image'
    },
    { 
        // Hide the blue table layout in the meantime
        // Since it's not visible, and not rotating, hide it to avoid rendering issues
        time:1,
        step:"js-hide",
        selector:'.motion-1--table'
    },
    {
        // Start the next scene
        // Red <table> scene slides to the left
        // Text-2 with @media copy is now visible
        time:300,
        step:"slide-3",
        selector:'.container'
    },
    {
        // While Text-2 is still visible, prep for the next scene
        // .slide-4 moves the responsive scene with blue background (.motion-2)
        // underneath the current .text-2
        time:100,
        step:"slide-4",
        selector:'.container'
    },
    {
        // Length of time that we read .text-2
        // After we're finished reading, shrink the .text-2 scene down
        // into the shape of the browser in .motion-2
        time:2000,
        step:"js-shrinkDown",
        selector:'.text-2'
    },
    {
        // Hide .text-2, which can't be seen anymore
        // TA DA! Transition to .motion-2
        time:250,
        step:"js-hide",
        selector:'.text-2'
    },
    {
        // Pop .motion-2's browser content into place
        time:300,
        step:"js-active",
        selector:'.motion-2--content'
    }    ,
    {
        // Populate the .motion-2 blue hero with content
        time:500,
        step:"js-active",
        selector:'.motion-2--hero table'
    },
    {
        // Populate the .motion-2 below-the-fold area with content
        time:500,
        step:"js-active",
        selector:'.motion-2--content table.main-content'
    },
    {
        // Shrink the browser into the shape of an iPhone
        time:1000,
        step:"js-transform-1",
        selector:'.motion-2--device'
    },
    {   
        // Animate the iPhone into the shape of an iPad
        time:1000,
        step:"js-transform-2",
        selector:'.motion-2--device'
    },
    {
        // Expand the black bezel to 100% and shrink the rest of the content down to 0
        time:1000,
        step:"js-shrinkDown",
        selector:'.motion-2--device'
    },
    {
        // Move the final .text-3 scene into place
        // The background is black so we don't notice
        time:250,
        step:"slide-5",
        selector:'.container'
    },
    {
        // Hide .motion-2, which can't be seen anyway
        time:100,
        step:"js-hide",
        selector:'.motion-2'
    },
    {   
        // Display:none .motion-2, so user can interact with .text-3 beneath it
        time:150,
        step:"js-kill",
        selector:'.motion-2'
    },
    {
        // Pop final CTA content into place
        time:200,
        step:"js-active",
        selector:'.text-3'
    },
    {
        // Fade-in replay button to repeat the fun
        time:250,
        step:"js-show",
        selector:'.replay'
    }
];

// Font-sizes need to be a percentage of the container's height
// These percentages are arbitrary based on what looked good

function textSize(){
    fontSize = parseInt(container.height());
    codeFontSize = parseInt(0.065454545 * fontSize) +"px";
    headerFontSize = parseInt(0.07 * fontSize) +"px";
    ctaFontSize = parseInt(0.06 * fontSize) +"px";
    $("p.code").css('font-size', codeFontSize);
    $(".text-3 .header").css('font-size', headerFontSize);
    $(".text-3 p:not(.header)").css('font-size', ctaFontSize);
}

// Resize .wrapper to be a square with dimension that equal the size of the browser
// Switch these values to window width if more appropriate

function windowResize(){
    windowHeight = $(window).height();
    windowWidth = $(window).width();
    if (windowHeight > windowWidth){
      wrapper.width(windowWidth).height(windowWidth);
    }
    else {
      wrapper.width(windowHeight).height(windowHeight);
    }
}

// Grab data from the animation array
// and create sets of class additions to elements after defined setTimeouts

function runAnimation(i, timeline){
    setTimeout(function(){
        $(animations[i].selector).addClass(animations[i].step);
    }, timeline);
}

// Go through the array, and execute each step one at a time in order
// by doing runAnimation() on each array element

function animationTimeline(){
    var timeline = 0;

    for(var i=0; i<animations.length; i++){
        timeline = parseInt(animations[i].time, 10) + parseInt(timeline, 10);
        runAnimation(i, timeline);
    }
}

// Go back to the starting state

function animationUndo(){
    // Fade out everything so the undo isn't messy
    container.addClass('js-hide');
    // Wait a second and then remove every class we added
    setTimeout(function(){
        // Loop through the array and remove every class from its paired selector
        for(var i=0; i<animations.length; i++){
        $(animations[i].selector).removeClass(animations[i].step);
    }
    },500);
    // After everything's back in its starting position, fade everything back in
    setTimeout(function(){
        container.removeClass('js-hide');
    },1000);
}


// Replay the animation
$('#replay').click(function(){
    // Reset all the element positions and styles
    animationUndo();
    // Wait a second, and then start the animation again
    setTimeout(animationTimeline,1000);
});

// If the user clicks on any part of the ad during the animation, send them to the landing page
container.click(function(){
    if (!container.hasClass('slide-5')){
        window.location='http://mediatemple.net/webhosting?utm_source=codepen&utm_medium=banner_midplay_justin_codepen&utm_content=275x275&utm_campaign=general';
    }
});

// Make sure the containers and text are the right size for the viewport
$(document).ready(function(){
    windowResize()
    textSize();
});

// When the viewport size changes, resize everything accordingly
$(window).resize(function(){
    windowResize();
    textSize();
});

// When everything is loaded, start the animation!
$(window).load(function() {
      animationTimeline();
});
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console