html, body {
height: 100%;
background: #333;
}
.site {
height: 100%;
}
.container {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
-webkit-transform-style : preserve-3d;
-moz-transform-style : preserve-3d;
-o-transform-style : preserve-3d;
-ms-transform-style : preserve-3d;
transform-style : preserve-3d;
}
.page-content {
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
background: #1abc9c;
}
#new-content {
background: #f1c40f;
z-index: 1;
}
.page-content p {
position: absolute;
width: 100%;
text-align: center;
font-family: Montserrat, sans-serif;
font-size: 75px;
text-transform: uppercase;
color: #fff;
font-weight: 400;
margin: 0;
}
#new-content p {
color: #010101;
}
.page-content p strong {
font-weight: 700;
}
var siteW = $(window).width();
var siteH = $(window).height();
$("p").css({ lineHeight: siteH + 'px' }); // dirty dirty
TweenMax.set(".site", { perspective: 5000 });
TweenMax.set(".container", { transformStyle: "preserve-3d", transformOrigin: '-0% 50%' });
TweenMax.set("#new-content", { rotationY: 90, z: -siteW/2, x: siteW/2 });
var tlFlip = new TimelineMax({ yoyo: true, repeat: -1, delay: 1.5, repeatDelay: 2 });
tlFlip
.to('.site', .5, { scale: 0.8, ease: Power2.easeInOut }, "start")
.to('.container', .4, { rotationY: -90, z: -siteW, ease: Power2.easeInOut }, "start+=0.7")
.to('.site', .5, { scale: 1, ease: Power2.easeInOut }, "start+=1.2");