Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="references-wrap">
  <div id="preloader-desktop-0" style="background: url(http://mathis-krueper.de/captain/content/uploads/2017/02/tw01.jpg); display: none;"></div>
  <div id="preloader-tablet-0" style="background: url(http://mathis-krueper.de/captain/content/uploads/2017/02/tw-tablet.jpg); display: none;"></div>
  <div id="preloader-phone-0" style="background: url(http://mathis-krueper.de/captain/content/uploads/2017/02/tw-phone.jpg); display: none;"></div>

  <div id="preloader-additional-0-0" style="background: url(http://mathis-krueper.de/captain/content/uploads/2017/02/tw02.jpg); display: none;"></div>
  <div id="preloader-additional-0-1" style="background: url(http://mathis-krueper.de/captain/content/uploads/2017/02/tw03.jpg); display: none;"></div>
            
  <div class="reference-container website">
    <div id="website-wrapper-0" class="website-container">
      <div class="blur-container" style="background: url(http://mathis-krueper.de/captain/content/uploads/2017/02/tw01.jpg)"></div>

      <div id="svg-container">

        <svg version="1.1" id="svg-0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
             width="692" height="383" xml:space="preserve">

          <g id="macbook0">
            <path id="bezel-macbook0" class="bezel-macbook" fill="none" stroke="#ffffff" stroke-width="2" d="M593.2,1H98.7
                                                                                                             C85.2,1,73.8,12,73.8,25.7V351h544.3V25.7C618.1,12,606.7,1,593.2,1z"/>
            <circle id="camera-macbook0" class="camera-macbook" fill="none" stroke="#ffffff" cx="346.9" cy="19.9" r="4">
            </circle>
            <path id="shape-macbook0" class="shape-macbook" fill="none" stroke="#ffffff" stroke-width="2" d="M639.9,381.8H52.1C21.6,381.8,1,371.4,1,366.9v-13.6
                                                                                                             c0-1.3,1.3-2.4,3-2.4h684c1.7,0,3,1.1,3,2.4v14.1C691,371,675.1,381.8,639.9,381.8z"/>
            <path id="line-macbook0" class="line-macbook" fill="none" stroke="#ffffff" stroke-linecap="square" d="M1.5,365.4h687.6"/>
            <rect id="screen-macbook0" class="screen-macbook" x="95.7" y="39.9" fill="none" stroke="#ffffff" width="499.6" height="291.1">
            </rect>
            <path id="touchpad-macbook0" class="touchpad-macbook" fill="none" stroke="#ffffff" d="M420.7,351.9v3.1c0,2.2-4.3,2.9-7.6,2.9H279
                                                                                                  c-3.4,0-7.8-0.7-7.8-2.9v-3.1"/>
          </g>

          <g id="ipad0">
            <path id="bezel-ipad0" fill="none" style="opacity: 0;" stroke="#D60057" stroke-width="2" d="M441.4,350H250.6
                                                                                                        c-6.6,0-12-5.4-12-12V45.1c0-6.6,5.4-12,12-12h190.9c6.6,0,12,5.4,12,12v292.9C453.5,344.6,448.1,350,441.4,350z"/>
            <rect id="screen-ipad0" style="opacity: 0;" x="255.5" y="65" fill="none" stroke="#D60057" width="182" height="252.9">
            </rect>
            <circle id="lock-ipad0" style="opacity: 0;" fill="none" stroke="#D60057" cx="346.5" cy="333" r="8">
            </circle>
            <circle id="camera-ipad0" style="opacity: 0;" fill="none" stroke="#D60057" cx="345.4" cy="49.9" r="3">
            </circle>
          </g>

          <g id="iphone0">
            <path id="bezel-phone0" style="opacity: 0;" fill="none" stroke="#D60057" stroke-width="2" d="M411,312.4
                                                                                                         c0,8.8-7.2,16-16.1,16h-97.9c-8.9,0-16.1-7.2-16.1-16V70.6c0-8.8,7.2-16,16.1-16h97.9c8.9,0,16.1,7.2,16.1,16V312.4L411,312.4z"/>
            <rect id="screen-phone0" style="opacity: 0;" x="290" y="90.5" fill="none" stroke="#D60057" width="111.9" height="199.1">
            </rect>
            <path id="speaker-phone0" style="opacity: 0;" fill="none" stroke="#D60057" d="M358,80.2c0,0.6-0.4,1.1-1,1.1h-20.1
                                                                                          c-0.5,0-1-0.5-1-1.1v-2.6c0-0.6,0.4-1.1,1-1.1H357c0.5,0,1,0.5,1,1.1V80.2L358,80.2z"/>
            <circle id="camera-phone0" style="opacity: 0;" fill="none" stroke="#D60057" cx="347" cy="66.5" r="3">
            </circle>
            <ellipse id="lock-phone0" style="opacity: 0;" fill="none" stroke="#D60057" cx="346" cy="308.5" rx="10" ry="10">
            </ellipse>
          </g>
        </svg>
      </div>

      <div id="cube-wrap-0" class="cube-wrap">
        <div id="cube-0-1" class="cube">
          <div class="cube-front" style="background: url(http://mathis-krueper.de/captain/content/uploads/2017/02/tw01.jpg)"></div>
          <div class="cube-back"></div>
          <div class="cube-top"></div>
          <div class="cube-bottom"></div>
          <div class="cube-left"></div>
          <div class="cube-right"></div>
        </div>

        <div id="cube-0-2" class="cube">
          <div class="cube-front" style="background: url(http://mathis-krueper.de/captain/content/uploads/2017/02/tw02.jpg)"></div>
          <div class="cube-back"></div>
          <div class="cube-top"></div>
          <div class="cube-bottom"></div>
          <div class="cube-left"></div>
          <div class="cube-right"></div>
        </div>

        <div id="cube-0-3" class="cube">
          <div class="cube-front" style="background: url(http://mathis-krueper.de/captain/content/uploads/2017/02/tw03.jpg)"></div>
          <div class="cube-back"></div>
          <div class="cube-top"></div>
          <div class="cube-bottom"></div>
          <div class="cube-left"></div>
          <div class="cube-right"></div>
        </div>

      </div>

    </div>
  </div>
  
  <div id="preloader-desktop-1" style="background: url(http://mathis-krueper.de/captain/content/uploads/2017/02/viaprinto-01.jpg); display: none;"></div>
            <div id="preloader-tablet-1" style="background: url(http://mathis-krueper.de/captain/content/uploads/2017/02/viaprinto-tablet.png); display: none;"></div>
            <div id="preloader-phone-1" style="background: url(http://mathis-krueper.de/captain/content/uploads/2017/02/viaprinto-phone.png); display: none;"></div>

                                <div id="preloader-additional-1-0" style="background: url(http://mathis-krueper.de/captain/content/uploads/2017/02/viaprinto-02.jpg); display: none;"></div>
                                <div id="preloader-additional-1-1" style="background: url(http://mathis-krueper.de/captain/content/uploads/2017/02/viaprinto-03.jpg); display: none;"></div>
            
            <div class="reference-container website">
                <div id="website-wrapper-1" class="website-container">
                    <div class="blur-container" style="background: url(http://mathis-krueper.de/captain/content/uploads/2017/02/viaprinto-01.jpg)"></div>

                    <div id="svg-container">

                        <svg version="1.1" id="svg-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                             width="692" height="383" xml:space="preserve">

                            <g id="macbook1">
                                <path id="bezel-macbook1" class="bezel-macbook" fill="none" stroke="#000000" stroke-width="2" d="M593.2,1H98.7
                            C85.2,1,73.8,12,73.8,25.7V351h544.3V25.7C618.1,12,606.7,1,593.2,1z"/>
                                <circle id="camera-macbook1" class="camera-macbook" fill="none" stroke="#000000" cx="346.9" cy="19.9" r="4">
                                </circle>
                                <path id="shape-macbook1" class="shape-macbook" fill="none" stroke="#000000" stroke-width="2" d="M639.9,381.8H52.1C21.6,381.8,1,371.4,1,366.9v-13.6
                            c0-1.3,1.3-2.4,3-2.4h684c1.7,0,3,1.1,3,2.4v14.1C691,371,675.1,381.8,639.9,381.8z"/>
                                <path id="line-macbook1" class="line-macbook" fill="none" stroke="#000000" stroke-linecap="square" d="M1.5,365.4h687.6"/>
                                <rect id="screen-macbook1" class="screen-macbook" x="95.7" y="39.9" fill="none" stroke="#000000" width="499.6" height="291.1">
                                </rect>
                                <path id="touchpad-macbook1" class="touchpad-macbook" fill="none" stroke="#000000" d="M420.7,351.9v3.1c0,2.2-4.3,2.9-7.6,2.9H279
                            c-3.4,0-7.8-0.7-7.8-2.9v-3.1"/>
                            </g>

                            <g id="ipad1">
                                <path id="bezel-ipad1" fill="none" style="opacity: 0;" stroke="#D60057" stroke-width="2" d="M441.4,350H250.6
        c-6.6,0-12-5.4-12-12V45.1c0-6.6,5.4-12,12-12h190.9c6.6,0,12,5.4,12,12v292.9C453.5,344.6,448.1,350,441.4,350z"/>
                                <rect id="screen-ipad1" style="opacity: 0;" x="255.5" y="65" fill="none" stroke="#D60057" width="182" height="252.9">
                                </rect>
                                <circle id="lock-ipad1" style="opacity: 0;" fill="none" stroke="#D60057" cx="346.5" cy="333" r="8">
                                </circle>
                                <circle id="camera-ipad1" style="opacity: 0;" fill="none" stroke="#D60057" cx="345.4" cy="49.9" r="3">
                                </circle>
                            </g>

                            <g id="iphone1">
                                <path id="bezel-phone1" style="opacity: 0;" fill="none" stroke="#D60057" stroke-width="2" d="M411,312.4
        c0,8.8-7.2,16-16.1,16h-97.9c-8.9,0-16.1-7.2-16.1-16V70.6c0-8.8,7.2-16,16.1-16h97.9c8.9,0,16.1,7.2,16.1,16V312.4L411,312.4z"/>
                                <rect id="screen-phone1" style="opacity: 0;" x="290" y="90.5" fill="none" stroke="#D60057" width="111.9" height="199.1">
                                </rect>
                                <path id="speaker-phone1" style="opacity: 0;" fill="none" stroke="#D60057" d="M358,80.2c0,0.6-0.4,1.1-1,1.1h-20.1
        c-0.5,0-1-0.5-1-1.1v-2.6c0-0.6,0.4-1.1,1-1.1H357c0.5,0,1,0.5,1,1.1V80.2L358,80.2z"/>
                                <circle id="camera-phone1" style="opacity: 0;" fill="none" stroke="#D60057" cx="347" cy="66.5" r="3">
                                </circle>
                                <ellipse id="lock-phone1" style="opacity: 0;" fill="none" stroke="#D60057" cx="346" cy="308.5" rx="10" ry="10">
                                </ellipse>
                            </g>
                        </svg>
                    </div>

                    <div id="cube-wrap-1" class="cube-wrap">
                        <div id="cube-1-1" class="cube">
                            <div class="cube-front" style="background: url(http://mathis-krueper.de/captain/content/uploads/2017/02/viaprinto-01.jpg)"></div>
                            <div class="cube-back"></div>
                            <div class="cube-top"></div>
                            <div class="cube-bottom"></div>
                            <div class="cube-left"></div>
                            <div class="cube-right"></div>
                        </div>

                                                    <div id="cube-1-2" class="cube">
                                <div class="cube-front" style="background: url(http://mathis-krueper.de/captain/content/uploads/2017/02/viaprinto-02.jpg)"></div>
                                <div class="cube-back"></div>
                                <div class="cube-top"></div>
                                <div class="cube-bottom"></div>
                                <div class="cube-left"></div>
                                <div class="cube-right"></div>
                            </div>

                                                        <div id="cube-1-3" class="cube">
                                <div class="cube-front" style="background: url(http://mathis-krueper.de/captain/content/uploads/2017/02/viaprinto-03.jpg)"></div>
                                <div class="cube-back"></div>
                                <div class="cube-top"></div>
                                <div class="cube-bottom"></div>
                                <div class="cube-left"></div>
                                <div class="cube-right"></div>
                            </div>

                                                </div>

                </div>
       
</div>

              
            
!

CSS

              
                .reference-container{
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;

  .image-element{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    display: block;
    width: 150%;
    height: 150%;
    background-size: cover;
    background-position: center;
  }
  .video-element {
    position: absolute; right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto;
    background-size: cover;
  }

  .website-container{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
  }

  .blur-container{
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.5;

    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
  }

  .svg-wrapper{
    //background: $black;
  }
}



#svg-container{
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 0 0;
  transform: matrix(1.5, 0, 0, 1.5, 0, 0) translate(-50%, -50%);
}

.website-screen{
  background-size: cover !important;
}

.screen-macbook{
  position: relative;
}
.screen-container{
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #ff0000;
}



//CUBES


.cube-wrap{
  width: 100vw;
  height: 100vh;
  display: block;
  position: relative;
  perspective: 1920px;
  perspective-origin: 50% 50%;
  opacity: 0;
  z-index: 2;
}
.cube {
  position: relative;
  width: 450px;
  transform-style: preserve-3d;
  transform: rotateY(30deg);
}
.cube div {
  position: absolute;
  background-size: cover !important;
}
.cube-back {
  transform: translateZ(-5px) rotateY(180deg);
  background: #dddddd;
  width: 450px;
  height: 640px;
}
.cube-right {
  transform: rotateY(-270deg) translateX(5px) translateZ(440px);
  transform-origin: top right;
  background: #dddddd;
  width: 10px;
  height: 640px;
}
.cube-left {
  transform: rotateY(270deg) translateX(-5px);
  transform-origin: center left;
  background: #dddddd;
  width: 10px;
  height: 640px;
}
.cube-top {
  transform: rotateX(-90deg) translateY(-5px);
  transform-origin: top center;
  background: #dddddd;
  width: 450px;
  height: 10px;
}
.cube-bottom {
  transform: rotateX(90deg) translateY(5px) translateZ(-630px);
  transform-origin: bottom center;
  background: #dddddd;
  width: 450px;
  height: 10px;
}
.cube-front {
  transform: translateZ(5px);
  width: 450px;
  height: 640px;
}

.cube-wrap .cube:nth-child(1){
  top: 15%;
  left: 5%;
}

.cube-wrap .cube:nth-child(2){
  top: 15%;
  left: 35%;
}

.cube-wrap .cube:nth-child(3){
  top: 15%;
  left: 65%;
}

              
            
!

JS

              
                var mainTimeline = new TimelineMax({repeat:-1});

MorphSVGPlugin.convertToPath("circle, rect, ellipse, line, polygon, polyline");

mainTimeline.add(websiteTimeline0('#website-wrapper-0'));

function websiteTimeline0(website) {

  //MorphSVGPlugin.convertToPath("circle, rect, ellipse, line, polygon, polyline");
  // Create sub timeline
  var timeline = new TimelineMax();

  // Add tweens to sub timeline

  timeline.call(setLines);
  timeline.call(morphToPhone);
  timeline.fromTo(website, 1, {opacity: '0'}, {opacity: '1'});
  timeline.call(drawOutlines);
  timeline.call(insertScreen, ['phone'], null, '+=1');
  timeline.to(website, 0, {opacity: '1', delay:2});
  timeline.call(morphToTablet);
  timeline.call(insertScreen, ['tablet'], null, '+=0.3');
  timeline.to(website, 0, {opacity: '1', delay:2});
  timeline.call(morphToMac);
  timeline.call(insertScreen, ['desktop'], null, '+=0.3');
  timeline.to(website, 0, {opacity: '1', delay:2});
  timeline.call(screenToFullscreen);
  timeline.call(hideSVG);
  timeline.to(website, 0, {opacity: '1', delay:5});
  timeline.call(insertCubes);
  timeline.to(website, 0, {opacity: '1', delay:5});
  //timeline.call(removeCode);
  mainTimeline.remove(timeline);

  function removeCode() {
    $('#website-wrapper-0').css('display','none');
  }

  function insertCubes() {
    TweenMax.to('#cube-wrap-0', 1, {opacity:1});
    TweenMax.fromTo('#cube-wrap-0 .cube', 5, {rotationY:0}, {rotationY:-30});
    TweenMax.to('#cube-wrap-0', 1, {opacity:0, delay:5});
  }

  function insertScreen(device){

    var screenVars = $('#screen-macbook0')[0].getBoundingClientRect();
    var screenTop = screenVars.top,
        screenLeft = screenVars.left,
        screenWidth = screenVars.width,
        screenHeight = screenVars.height;

    if(!$('#website-screen-0').length){
      $('#website-wrapper-0').append(
        '<div id="website-screen-0" class="website-screen"></div>'
      );
    }

    TweenMax.set("#website-screen-0", {
      position: 'absolute',
      display:'block',
      opacity:'0',
      top: screenTop,
      left: screenLeft,
      width: screenWidth,
      height: screenHeight
    });

    if(device == 'phone'){
      TweenMax.set("#website-screen-0", {background: 'url(http://mathis-krueper.de/captain/content/uploads/2017/02/tw-phone.jpg)'});
    } else if(device == 'tablet'){
      TweenMax.set("#website-screen-0", {background: 'url(http://mathis-krueper.de/captain/content/uploads/2017/02/tw-tablet.jpg)'});
    } else if(device == 'desktop'){
      TweenMax.set("#website-screen-0", {background: 'url(http://mathis-krueper.de/captain/content/uploads/2017/02/tw01.jpg)'});
    }

    TweenMax.fromTo("#website-screen-0", 0.5, {opacity:"0"}, {opacity:"1"});
    if(device != 'desktop'){
      TweenMax.to("#website-screen-0", 0.5, {opacity:"0", delay:2-0.5});
    }
  }

  function screenToFullscreen(){
    TweenMax.to("#website-screen-0", 1, {top: 0, left:0, width:'100vw', height:'100vh', ease: Elastic.easeOut});
    TweenMax.fromTo("#website-screen-0", 5, {backgroundPosition:'top'}, {backgroundPosition:'bottom', delay: 1});
    TweenMax.to("#website-screen-0", 1, {opacity:0, delay: 5});
  }

  function drawOutlines(){
    TweenMax.fromTo("#bezel-macbook0", 1, {drawSVG:"0% 0%"}, {drawSVG:"0% 100%"});
    TweenMax.fromTo("#camera-macbook0", 1, {drawSVG:"0% 0%"}, {drawSVG:"0% 100%"});
    TweenMax.fromTo("#screen-macbook0", 1, {drawSVG:"0% 0%"}, {drawSVG:"0% 100%"});
    TweenMax.fromTo("#shape-macbook0", 1, {drawSVG:"0% 0%"}, {drawSVG:"0% 100%"});
    TweenMax.fromTo("#line-macbook0", 1, {drawSVG:"0% 0%"}, {drawSVG:"0% 100%"});
    TweenMax.fromTo("#touchpad-macbook0", 1, {drawSVG:"0% 0%"}, {drawSVG:"0% 100%"});
  }

  function morphToPhone() {
    TweenMax.to("#bezel-macbook0", 0.2, {morphSVG:"#bezel-phone0"});
    TweenMax.to("#camera-macbook0", 0.2, {morphSVG:"#camera-phone0"});
    TweenMax.to("#screen-macbook0", 0.2, {morphSVG:"#screen-phone0"});
    TweenMax.to("#shape-macbook0", 0.2, {morphSVG:"#lock-phone0", css:{opacity:0}});
    TweenMax.to("#line-macbook0", 0.2, {morphSVG:"#speaker-phone0", css:{opacity:0}});
    TweenMax.to("#touchpad-macbook0", 0.2, {morphSVG:"#lock-phone0"});
  }

  function morphToTablet() {
    TweenMax.to("#bezel-macbook0", 0.2, {morphSVG:"#bezel-ipad0"});
    TweenMax.to("#camera-macbook0", 0.2, {morphSVG:"#camera-ipad0"});
    TweenMax.to("#screen-macbook0", 0.2, {morphSVG:"#screen-ipad0"});
    TweenMax.to("#shape-macbook0", 0.2, {morphSVG:"#lock-ipad0", css:{opacity:0}});
    TweenMax.to("#line-macbook0", 0.2, {morphSVG:"#camera-ipad0", css:{opacity:0}});
    TweenMax.to("#touchpad-macbook0", 0.2, {morphSVG:"#lock-ipad0"});
  }

  function morphToMac(){
    TweenMax.to("#bezel-macbook0", 0.2, {morphSVG:"#bezel-macbook0"});
    TweenMax.to("#camera-macbook0", 0.2, {morphSVG:"#camera-macbook0"});
    TweenMax.to("#screen-macbook0", 0.2, {morphSVG:"#screen-macbook0"});
    TweenMax.to("#shape-macbook0", 0.2, {morphSVG:"#shape-macbook0", css:{opacity:1}});
    TweenMax.to("#line-macbook0", 0.2, {morphSVG:"#line-macbook0", css:{opacity:1}});
    TweenMax.to("#touchpad-macbook0", 0.2, {morphSVG:"#touchpad-macbook0"});
  }

  function setLines(){
    $('#website-wrapper-0').css('display','block');
    TweenMax.set("#website-screen-0", {opacity:0});
    TweenMax.set('#svg-0', {opacity:1});
    TweenMax.set("#bezel-macbook0", {drawSVG:"0% 0%"});
    TweenMax.set("#camera-macbook0", {drawSVG:"0% 0%"});
    TweenMax.set("#screen-macbook0", {drawSVG:"0% 0%"});
    TweenMax.set("#shape-macbook0", {drawSVG:"0% 0%"});
    TweenMax.set("#line-macbook0", {drawSVG:"0% 0%"});
    TweenMax.set("#touchpad-macbook0", {drawSVG:"0% 0%"});
  }

  function hideSVG(){
    TweenMax.to('#svg-0', 1, {opacity:0});
  }

  return timeline;
}

mainTimeline.add(websiteTimeline1('#website-wrapper-1'));

            function websiteTimeline1(website) {

                //MorphSVGPlugin.convertToPath("circle, rect, ellipse, line, polygon, polyline");
                // Create sub timeline
                var timeline = new TimelineMax();

                // Add tweens to sub timeline

                timeline.call(setLines);
                timeline.call(morphToPhone);
                timeline.fromTo(website, 1, {opacity: '0'}, {opacity: '1'});
                timeline.call(drawOutlines);
                timeline.call(insertScreen, ['phone'], null, '+=1');
                timeline.to(website, 0, {opacity: '1', delay:1});
                timeline.call(morphToTablet);
                timeline.call(insertScreen, ['tablet'], null, '+=0.3');
                timeline.to(website, 0, {opacity: '1', delay:1});
                timeline.call(morphToMac);
                timeline.call(insertScreen, ['desktop'], null, '+=0.3');
                timeline.to(website, 0, {opacity: '1', delay:1});
                timeline.call(screenToFullscreen);
                timeline.call(hideSVG);
                timeline.to(website, 0, {opacity: '1', delay:5});
                timeline.call(insertCubes);
                timeline.to(website, 0, {opacity: '1', delay:5});
                //timeline.call(removeCode);
                mainTimeline.remove(timeline);

                function removeCode() {
                    $('#website-wrapper-1').css('display','none');
                }

                function insertCubes() {
                    TweenMax.to('#cube-wrap-1', 1, {opacity:1});
                    TweenMax.fromTo('#cube-wrap-1 .cube', 5, {rotationY:0}, {rotationY:45});
                    TweenMax.to('#cube-wrap-1', 1, {opacity:0, delay:5});
                }

                function insertScreen(device){

                    var screenVars = $('#screen-macbook1')[0].getBoundingClientRect();
                    var screenTop = screenVars.top,
                        screenLeft = screenVars.left,
                        screenWidth = screenVars.width,
                        screenHeight = screenVars.height;

                    if(!$('#website-screen-1').length){
                        $('#website-wrapper-1').append(
                            '<div id="website-screen-1" class="website-screen"></div>'
                        );
                    }

                    TweenMax.set("#website-screen-1", {
                        position: 'absolute',
                        display:'block',
                        opacity:'0',
                        top: screenTop,
                        left: screenLeft,
                        width: screenWidth,
                        height: screenHeight
                    });

                    if(device == 'phone'){
                        TweenMax.set("#website-screen-1", {background: 'url(http://mathis-krueper.de/captain/content/uploads/2017/02/viaprinto-phone.png)'});
                    } else if(device == 'tablet'){
                        TweenMax.set("#website-screen-1", {background: 'url(http://mathis-krueper.de/captain/content/uploads/2017/02/viaprinto-tablet.png)'});
                    } else if(device == 'desktop'){
                        TweenMax.set("#website-screen-1", {background: 'url(http://mathis-krueper.de/captain/content/uploads/2017/02/viaprinto-01.jpg)'});
                    }

                    TweenMax.fromTo("#website-screen-1", 0.5, {opacity:"0"}, {opacity:"1"});
                    if(device != 'desktop'){
                        TweenMax.to("#website-screen-1", 0.5, {opacity:"0", delay:1-0.5});
                    }
                }

                function screenToFullscreen(){
                    TweenMax.to("#website-screen-1", 1, {top: 0, left:0, width:'100vw', height:'100vh', ease: Bounce.easeOut});
                    TweenMax.fromTo("#website-screen-1", 5, {backgroundPosition:'top'}, {backgroundPosition:'bottom', delay: 1});
                    TweenMax.to("#website-screen-1", 1, {opacity:0, delay: 5});
                }

                function drawOutlines(){
                    TweenMax.fromTo("#bezel-macbook1", 1, {drawSVG:"0% 0%"}, {drawSVG:"0% 100%"});
                    TweenMax.fromTo("#camera-macbook1", 1, {drawSVG:"0% 0%"}, {drawSVG:"0% 100%"});
                    TweenMax.fromTo("#screen-macbook1", 1, {drawSVG:"0% 0%"}, {drawSVG:"0% 100%"});
                    TweenMax.fromTo("#shape-macbook1", 1, {drawSVG:"0% 0%"}, {drawSVG:"0% 100%"});
                    TweenMax.fromTo("#line-macbook1", 1, {drawSVG:"0% 0%"}, {drawSVG:"0% 100%"});
                    TweenMax.fromTo("#touchpad-macbook1", 1, {drawSVG:"0% 0%"}, {drawSVG:"0% 100%"});
                }

                function morphToPhone() {
                    TweenMax.to("#bezel-macbook1", 0.2, {morphSVG:"#bezel-phone1"});
                    TweenMax.to("#camera-macbook1", 0.2, {morphSVG:"#camera-phone1"});
                    TweenMax.to("#screen-macbook1", 0.2, {morphSVG:"#screen-phone1"});
                    TweenMax.to("#shape-macbook1", 0.2, {morphSVG:"#lock-phone1", css:{opacity:0}});
                    TweenMax.to("#line-macbook1", 0.2, {morphSVG:"#speaker-phone1", css:{opacity:0}});
                    TweenMax.to("#touchpad-macbook1", 0.2, {morphSVG:"#lock-phone1"});
                }

                function morphToTablet() {
                    TweenMax.to("#bezel-macbook1", 0.2, {morphSVG:"#bezel-ipad1"});
                    TweenMax.to("#camera-macbook1", 0.2, {morphSVG:"#camera-ipad1"});
                    TweenMax.to("#screen-macbook1", 0.2, {morphSVG:"#screen-ipad1"});
                    TweenMax.to("#shape-macbook1", 0.2, {morphSVG:"#lock-ipad1", css:{opacity:0}});
                    TweenMax.to("#line-macbook1", 0.2, {morphSVG:"#camera-ipad1", css:{opacity:0}});
                    TweenMax.to("#touchpad-macbook1", 0.2, {morphSVG:"#lock-ipad1"});
                }

                function morphToMac(){
                    TweenMax.to("#bezel-macbook1", 0.2, {morphSVG:"#bezel-macbook1"});
                    TweenMax.to("#camera-macbook1", 0.2, {morphSVG:"#camera-macbook1"});
                    TweenMax.to("#screen-macbook1", 0.2, {morphSVG:"#screen-macbook1"});
                    TweenMax.to("#shape-macbook1", 0.2, {morphSVG:"#shape-macbook1", css:{opacity:1}});
                    TweenMax.to("#line-macbook1", 0.2, {morphSVG:"#line-macbook1", css:{opacity:1}});
                    TweenMax.to("#touchpad-macbook1", 0.2, {morphSVG:"#touchpad-macbook1"});
                }

                function setLines(){
                    $('#website-wrapper-1').css('display','block');
                    TweenMax.set("#website-screen-1", {opacity:0});
                    TweenMax.set('#svg-1', {opacity:1});
                    TweenMax.set("#bezel-macbook1", {drawSVG:"0% 0%"});
                    TweenMax.set("#camera-macbook1", {drawSVG:"0% 0%"});
                    TweenMax.set("#screen-macbook1", {drawSVG:"0% 0%"});
                    TweenMax.set("#shape-macbook1", {drawSVG:"0% 0%"});
                    TweenMax.set("#line-macbook1", {drawSVG:"0% 0%"});
                    TweenMax.set("#touchpad-macbook1", {drawSVG:"0% 0%"});
                }

                function hideSVG(){
                    TweenMax.to('#svg-1', 1, {opacity:0});
                }

                return timeline;
            }

              
            
!
999px

Console