cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

            
              <!--   <div id='' class=''></div>     ╱╲╱╲╱╲╱╲╱╲-->


<div id='Reel-Player-BG' class='light-gradient-bg RP-wrap'>
 <b>Click HERE to Re-Run.</b>
  
  <div class='SafariBUGwrapper'>
    <div id='' class='reel-player-cont amb-heavy-shadow'>
        <div class='rp-img-cont'>
          <img id='RP-GoldSands_DE' class='player-img' src="https://scontent-sjc2-1.cdninstagram.com/t51.2885-15/e35/10655025_591989287644242_1826578012_n.jpg">
        </div>
        <div id='' class='player-bar-top'>
           <h1 id='' class=''>Capstone Reel</h1>
           <h2 id='' class=''>Drew Endly</h2> 
          <p>Skip<i class="material-icons">navigate_next</i></p>
          
        </div>
      
        <div id='' class='player-bar-btm'>
      
            <div class="volume-slide-cont">
                <div class="slider_horizontal">
                    <div class="progress">
                        <div class="handle"></div>
                    </div>
                </div>
            </div>
            <div id='Play-Pause' class='center-button'>
                <svg id="Play-SVG-Circle" class="">
                  <circle id="Circle-Outline"  class="" cy="50%" cx="50%" r="21em"/>
                  <circle id="Circle-Fill" class="" cy="50%" cx="50%" r="21em"/> 
                  <circle id="Circle-gsap" class="" cy="50%" cx="50%" r="21em"/> 
                </svg>
                <i class="material-icons ">play_arrow</i>
            </div> 
            <div class="btm-right-cont">
              <i class="material-icons i-fullscreen">code</i>
           </div>
          <div id='img-flex'>
            <img id='Btm-Img-Blur' src="https://scontent-sjc2-1.cdninstagram.com/t51.2885-15/e35/10655025_591989287644242_1826578012_n.jpg">
          </div>
        </div>
         
      <div id='' class='video-cont'>
        <div id='DE_Reel' class='video-BG'>
          <iframe id="video" src="https://player.vimeo.com/video/127668527#t=0m33s?api=1&player_id=video"  webkitallowfullscreen mozallowfullscreen allowfullscreen ></iframe>
        </div>
     
      </div>
    </div> 
  </div>  
    
    <div id='volume-result' class=''></div>
</div>
            
          
!
            
              html, body {	
    ////!!!!!!//// PX to (R?)EM Conversion TEST !!!!/////
  font-size: 1px; // 0.75px
  
  -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale; 
  & b {display: block; width: 100vw; height: 3em; line-height: 3em; font-family: Sans-Serif; color: darkgrey; font-size: 10rem; font-weight: 900; text-align: center; cursor: pointer}
}
//



.RP-wrap {
  position: absolute;
   top: 0;
  width: 100vw;
  height: 100vh;
}

.light-gradient-bg {  
background-color:  rgb(234,236,235);
//background:  url('http://api.thumbr.it/whitenoise-400x400.png?background=FFFFFF00&noise=444444&density=66&opacity=5') 0 0/200rem 200rem, linear-gradient(to bottom, rgba(254,254,254,1) 0%, rgba(245,245,244,1) 100%); //noise + grad
  background:  url('http://api.thumbr.it/whitenoise-400x400.png?background=EDEFEE&noise=444444&density=66&opacity=5') 0 0/200rem 200rem; // FallBack no gradient, noise on default  non-trans-BG-in-IMG-href.
    background:  url('http://api.thumbr.it/whitenoise-400x400.png?background=FFFFFF00&noise=444444&density=66&opacity=5') 0 0/200rem 200rem, linear-gradient(top, rgba(240,242,241,1) 0%, rgba(231,232,231,1) 100%); // Old-syntax gradient — DARKER noise + grad 
  background:  url('http://api.thumbr.it/whitenoise-400x400.png?background=FFFFFF00&noise=444444&density=66&opacity=5') 0 0/200rem 200rem, linear-gradient(to bottom, rgba(240,242,241,1) 0%, rgba(231,232,231,1) 100%); // New-syntax gradient — DARKER noise + grad 
}


.SafariBUGwrapper {
   transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  width: 100%; height: 100%;
}


.reel-player-cont {
  position: absolute;
  display: block;
  top: 0; left: 0; right: 0; bottom: 0;
  margin: auto;
  width: 360rem;
  height: 360rem;
  border-radius: 8rem;
  background: rgb(240, 242, 241) ;
  align-items: center;
  transform-origin: 50% 150%;
  border-left: solid 1rem rgb(240, 242, 241);
  border-right: solid 1rem rgb(240, 242, 241);
  border-top: solid 1rem rgba(255,255,255,0.5);
  border-bottom: solid 1rem rgba(0,0,0,0.25);
//  transform: scaleX(1);
//  z-index: 1;
 // transform-perspective: 20;
  //overflow:hidden !important;
//  &:hover #Btm-Img-Blur {filter: blur(32rem); transition-delay: 0.0s; top: -580%;}
//  &:hover #Btm-Img-Blur.active, #Btm-Img-Blur.active {opacity: 0.4; filter:  blur(48rem); margin-top: -300rem;}
}

.amb-heavy-shadow {
box-shadow: 0rem 0rem 0rem 0rem rgba(0,2,6,0.05), 0rem 0rem 0rem 0rem rgba(0,2,6,0.05), 0rem 0rem 0rem 0rem rgba(0,2,6,0.05), 0rem 0rem 0rem 0rem rgba(0,2,6,0.05), 0rem 0rem 0rem 0rem rgba(0,2,6,0.05); // All-0's for GSAP INtro Tween
// box-shadow: 0rem 14rem 21rem 0rem rgba(0,2,6,0.05), 0rem 40rem 15rem -23rem rgba(0,2,6,0.08), 0rem 55rem 30rem -23rem rgba(0,2,6,0.12), 0rem 60rem 55rem -23rem rgba(0,2,6,0.10), 0rem 50rem 120rem -23rem rgba(0,2,6,0.24) // This is what GSAP Tweens to. now
  
  
 // Nu Smaller box-shadow: 0 14rem 21rem 0 rgba(0,2,6,0.05), 0 40rem 18rem -26rem rgba(0,2,6,0.08), 0 60rem 30rem -30rem rgba(0,2,6,0.12), 0 60rem 55rem -26rem rgba(0,2,6,0.10), 0 50rem 100rem -26rem rgba(0,2,6,0.2);
 // transition: box-shadow 0.5s ease;
/*  &:hover{
    box-shadow: 0 2rem 1rem 0 rgba(0,2,6,0.08), 0 2rem 4rem -0rem rgba(0,2,6,0.08), 0 0 0 -0rem rgba(0,2,6,0.06), 0 0 0 -4rem rgba(0,2,6,0.12), 0 0 2rem -4rem rgba(0,2,6,0.12);
        //vvv lighter-out
    //box-shadow: 0 2rem 2rem 0 rgba(0,2,6,0.05), 0 4rem 5rem 0 rgba(0,2,6,0.08), 0 0 0 0 rgba(0,2,6,0.12), 0 0 0 0 rgba(0,2,6,0.05), 0 0 0 0 rgba(0,2,6,0.1);
    } */
}
.video-cont {
  position: absolute;
  width: 100%;
  height: 100%;
  top:0; left: 0;
  background-color: transparent;
  border-radius: 8rem;
  overflow: hidden;
  z-index: 10;
  pointer-events: none;
    .video-BG {
    position: absolute;
    width: 100%;
    height: 65rem;
    bottom:0; left: 0;
    background-color: rgb(15,15,15);
      opacity: 0;
   //   visibility: hidden;
    pointer-events: visible;
  }
}

 iframe { 
   width:100%; 
  height:180%; 
  position:absolute; 
  left:0; 
  top:-40%; 
  z-index:3;
  // opacity: 0;
}



#Btm-Img-Blur {
//  filter: blur(0rem); // blur=0 for (when hover active vvv-below)
  filter: blur(32rem); //DISABLED Hover for Performance (Blur is now constant/ Hover state above ^^^)
  &.active {filter: blur(48rem)}
 // position: relative;
  display: block;
  margin-top: -320rem;
 // top: -565%;
//  left: -50%;
  width: 648rem;
  z-index: -1;
 // mix-blend-mode: screen;
  
  opacity: 0.3;
  transition: all 1.2s ease;
  transition-property: filter, top, margin, opacity; //, top, opacity, width;
  transition-delay: 0.5s;
  transform: rotateX(0.5deg);
  transform-origin: 50% 50%;
//  &.active:hover {top: 0%; filter: blur(0rem);}
}
#img-flex{
  display: flex;
  position: absolute;
  width: 100%; height: 100%;
  align-items: center;
  justify-content: center;
}

.rp-img-cont {
 display:block;
 position: relative;
 top: 0; left:0;
 height: 360rem;
 width: 360rem;
  margin: 0 auto;
 border-radius: inherit;
  z-index: 0; //fixes border-overflow
 //     -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); /* this fixes the overflow:hidden in Chrome/Opera */
// opacity: 0.9999; //fixes border-overflow
  overflow: hidden;
}
.player-img {
   position: absolute;
  top: 0; left:0; bottom: 0; right: 0;
  margin: auto;
  margin-left: -5%;
  margin-bottom: -5%;
 height: 110%;
 opacity: 0.95;
//  filter: blur(15rem);
//  transition: filter 0.5s ease;
//  transition-duration: 1.2s;
  transition: margin 1.2s cubic-bezier(0.16, 0.0, 0, 0.95); 
  transition-delay:0.1s;
  &.active { margin-bottom: 2%; transition-delay:0s; transition-duration:0.6s; transition-timing-function: cubic-bezier(0.20, 0.25, 0, 1);}
}

// Top BAR *Start
.player-bar-top {
  position: absolute;
  top: 0;
  height: 66rem;
  width: 100%;
  
//  background: rgba(0,1,2, 0.015);
  border-radius: 8rem 8rem 0 0;
   h1, h2 {font-family: 'Product Sans', 'Proxima Nova', 'Gotham', 'Helvetica Neue', Sans Serif; color: rgb(0,3,12);left:50%;  margin-left: -150rem; text-align: left;}
   h1{
     position: relative;
     margin-top: 22rem;
     font-size: 12rem;
     font-weight: 600;
     letter-spacing: 0.067em;
     opacity: 0.7;
     line-height: 15rem;
   }
  h2{
     position: relative;
     font-size: 11rem;
     font-weight: 400;
     letter-spacing: 0.033em;
     opacity: 0.4;
    line-height: 17rem;
   }
  p{
    position: absolute;
    height: 100%;
    top: 0;
    right: 0;
    margin-right: 20rem;
    text-align: right;
    font: 600  11rem/66rem 'Proxima Nova';
    opacity: 0.0; /////////
    & i{
      font-size: 28rem;
      line-height: 60rem;
      text-align: right;
      vertical-align: middle;
    }
  }
}

//Controls BTM BAR
.player-bar-btm {
  position: absolute;
  bottom: 0;
  height: 66rem;
  width: 100%;
 // background: rgba(0,1,2, 0.015);
  background: rgba(255,255,255, 0.2);
  border-radius: 0 0 8rem 8rem;
  user-select: none;
  overflow: hidden;
  z-index: 99;
 // box-shadow: 0rem 0rem 0rem 0rem rgba(0,2,6,0.02);
  box-shadow: 0rem -3rem 3rem -3rem rgba(0,2,6,0.024), 0rem -6rem 10rem -4rem rgba(90,60,15,0.0166);
    transition: box-shadow 1s ease;
 // &.active {box-shadow: 0rem -14rem 3rem -12rem rgba(0,2,6,0.032), 0rem -22rem 12rem -12rem rgba(90,60,15,0.020);}
}
/* Volume Slider START */
.volume-slide-cont {
  display: flex;
 position: absolute;
  left: 0;
  height: 100%;
  width: 40%;
 // justify-content: space-around;
  align-items: center;
  float: left; 
  font-size: 100%;
}
.slider_horizontal {
  position: relative;
  top: 0rem;
  left: 32rem;
  width: 80rem;
  height: 1.6rem;
  background: rgba(0,0,0,0.056);
}
.progress {
  position: absolute;
  bottom: 0;
  width: 0; //starting val 75%
  height: 100%;
  background: rgba(28,0,0,0.093);
}
.handle {
  position: absolute;
  left: 0; //starting val 68rem
  top: 0;
  width: 12rem;
  height: 12rem;
  margin-left: -6rem;
  margin-top: -6rem;
  border-radius: 50%;
  box-sizing: border-box;
//  border: solid 1rem transparent;
  cursor: pointer;
  background: rgba(255,255,255,1.0);
  box-shadow: 0 2rem 3rem rgba(0,0,0,0.08), 0 5rem 6rem rgba(0,0,0,0.1);
  transform: scale(1);
  transform-origin: 50% 60%;
  transition: all 0.25s ease;
  transition-property: transform, box-shadow, background;
  &:hover, &:active {
    background: rgba(255,255,255,1.0); 
  }
  &:hover {
 //   border: solid 1rem rgba(0,0,0,0.15);
    transform: scale(1.15);
    box-shadow: 0 3rem 4rem rgba(0,0,0,0.15), 0 6rem 8rem rgba(0,0,0,0.2);
  }
  &:active {
    transform: scale(1.0);
    box-shadow: 0 1rem 1rem rgba(0,0,0,0.15), 0 2rem 4rem rgba(0,0,0,0.12);
  }
}
#volume-result {
  position:absolute;
  height: 20rem;
  width: 180rem;
  top:10rem;
  right:100rem;
  text-align: center;
  font: 100 11rem/20rem monospace;
  color: grey;
//  background: silver;
}
/* Volume Slider END */
.center-button {
  position: relative;
  margin: 0 auto;
  height: 100%;
  width: 66rem;
  border-radius: 50%;
  & i{
    display:block;
    position: relative;
    width: intrinsic; width: fit-content;
    height: intrinsic; height: fit-content;
    font-size: 24rem;
    line-height: 66rem;
    margin: 0 auto;
    pointer-events: none;
    text-shadow: 0 0 0 rgba(0,0,0, 0.2), 0 0 0 rgba(0,0,0, 0.3);
    transition: text-shadow 0.3s ease;
  }
}  

#Play-SVG-Circle {
  display: block;
  position: absolute;
  height:100%; 
  width: 100%;
  fill: none;
  pointer-events: visiblePainted;

  & #Circle-Outline {
    fill: transparent;
    stroke: rgb(0,0,0);
    opacity: 0.1;
    stroke-width: 0.6666rem;
    stroke-dashoffset: 133;
    stroke-dasharray: 133 133;   /* 133=length */
    transform-origin:'50% 50%';
    transition: stroke 0.4s ease-out;
    cursor: pointer;
    &:hover {
      //opacity: 0.0 !important;
      stroke: rgba(0,0,0, 0.1);
    }
    &:hover ~ #Circle-Fill{
      r: 21.75rem;
      opacity: 0.05;
      transition: r 0.4s cubic-bezier(0.1,0.1, 0.0, 1),opacity 0s ease-out;
    }
  }
  & #Circle-Fill {
    fill: rgb(0,0,0);
    opacity: 0.0;
    r: 0;
    transition: opacity 0.4s ease-out, r 0s 0.4s ease-out;
    pointer-events: none;
  }
    & #Circle-gsap {
    fill: rgb(0,0,0);
    opacity: 0.04;
    
    pointer-events: none;
  }
  &:hover + i {
    text-shadow: 0 3rem 2rem rgba(0,0,0, 0.2), 2rem 4rem 6rem rgba(0,0,0, 0.25);
    }
}
.btm-right-cont {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 40%;
  & i{
    position: absolute;
    font-size: 24rem;
    line-height: 66rem;
    right: 0;
    margin: 0 26rem;
    opacity: 0.08;
    transform: rotate(-45deg);
    cursor: pointer;
    text-shadow: 0 0 0 rgba(0,0,0, 0.8), 0 0 0 rgba(0,0,0, 0.6);
    transition: all 0.25s ease;
    &:hover {
      opacity: 0.85;
      text-shadow: -2rem 2rem 2rem rgba(0,0,0, 0.2), -2rem 4rem 6rem rgba(0,0,0, 0.25);
    }
  }
}
//BTM Bar *End*
            
          
!
            
               $(document).ready(function () {
   
    //// VIMEO–player API //
   var idPlayer = new Vimeo.Player('video');
   idPlayer.pause();
   setTimeout(function(){idPlayer.pause();},1000); //SAFARI  play on -load BUG
   
   
   var RP_cont = $(".reel-player-cont"),
    rp_h1 = $(".player-bar-top h1"),
    rp_h2 = $(".player-bar-top h2"),
    h1_h2 = $(".player-bar-top h1, .player-bar-top h2"),
    rp_BTM = $(".player-bar-btm"),
    Vol_cont = $(".volume-slide-cont"),
    vol_prog = $(".volume-slide-cont .progress"),
    vol_handle = $(".volume-slide-cont .handle"),
    center_button = $(".center-button"),
    btm_right = $(".btm-right-cont"),
    Play_SVG = $("#Play-SVG-Circle"),
    i_fullscreen = $(".i-fullscreen"),
    video_BG = $(".video-BG"),
    rp_img = $(".player-img");
   
   
   
   
    //// Intro-Open Anim. //
   function introOpen(){  

  //   var introTween = new TweenMax({x: 100, paused:true} );
   TweenMax.set(RP_cont, {transformPerspective:1750})

   TweenMax.from(RP_cont, 0.45, {scaleX: 0, autoAlpha: 0.5, ease:Power3.easeInOut})
   TweenMax.from(RP_cont, 0.6, { scaleY: 0.01, delay:0.0, ease:Power3.easeInOut})
   TweenMax.from(RP_cont, 1.33, {y: -500, rotationX:125, ease:Expo.easeOut, onCompleteParams:[".reel-player-cont, .rp-img-cont"], onComplete: endFix })
   TweenMax.from(".rp-img-cont", 1.1, {scale: 1, autoAlpha: 0.00, delay:0.2, ease:Power2.easeInOut, force3D: false})
   TweenMax.fromTo(".amb-heavy-shadow", 1.1, {boxShadow:"0em 0em 0em 0em rgba(0,2,6,0.05), 0em 0em 0em 0em rgba(0,2,6,0.05), 0em 0em 0em 0em rgba(0,2,6,0.05), 0em 0em 0em 0em rgba(0,2,6,0.05), 0em 0em 0em 0em rgba(0,2,6,0.05) " , force3D: true},
           {delay:0.4, boxShadow: "0em 14em 21em 0em rgba(0,2,6,0.05), 0em 40em 15em -23em rgba(0,2,6,0.08), 0em 55em 30em -23em rgba(0,2,6,0.12), 0em 60em 55em -23em rgba(0,2,6,0.10), 0em 50em 120em -23em rgba(0,2,6,0.24)" , ease:Power3.easeOut, force3D: true})
   
};
   introOpen();
     
   $('b').click(function (){  
     introOpen();
  });
     
   function endFix(x) {
    TweenMax.set(x,{ clearProps:"all"});
 /*  x.each(function(index, param) {
   $('body').append("<p style='pointer-events: none; position: relative; top: -500em; font-size: 24%; font-family: monospace;'>"
              + "no. " + index  + " " + $(this).prop("tagName") + " " + $(this).prop("className") + " Props Cleared</p>"); //Logs Tag name of cleared tweens selector (aka param:) 
  // $("#msg").html($(x).attr("id")+" onComplete fired");
    //console.log(o); 
    }); */
  }; 


////// Custom VOLUME SLIDER!    *Start*
  var jHorizontalHandle = $('.slider_horizontal .handle');
  var jHorizontalProgress = jHorizontalHandle.closest('.progress');

  jHorizontalHandle.on('mousedown', function (e) {
      if (1 === e.which) { // left click
          dragSlider(jHorizontalHandle, '.slider_horizontal', true, function (v, p) {
              jHorizontalProgress.css('width', (p * 1) + '%');
              jHorizontalHandle.css('left', (v * 1) + 'px');
            document.getElementById('volume-result').innerHTML = 'Vol: ' + Math.floor(p) + '% ' + Math.floor(v) + '/' + $('.slider_horizontal').css('width') ;
          });
      }
    // Run!
  });
////// VOLUME SLIDER    *END*




////// RP-Hover Timeline
  
var RPhover_tl = new TimelineMax({paused:true}); 

RPhover_tl
// .set(RP_cont,  {overflow: 'hidden'}) 
.set('#Circle-Outline', {opacity: 0.25, rotation: 90, transformOrigin:'50% 50%'})
.set(rp_img, { orce3D:true})

.addLabel('label--0X', '+=0')
.addLabel('label--0A', '+=0.225')
.addLabel('label--0B', '+=0.0')
// .addLabel('label--0Z', '+=3.0')

//.to(rp_img, 0.7, {opacity:1, marginBottom:'0%', ease:Power2.easeOut, force3D:true}, "label--0X-=0.0")
//.to(rp_img, 0.2, {opacity:.5, transformOrigin:'50% 0%', ease:Power2.easeInOut, force3D:true}, "label--0X-=0.0")

.from(rp_h1, 0.9, {  x:-12, letterSpacing:'+=0.0em', ease:Expo.easeOut}, "label--0A+=0.0")
.from(rp_h2, 0.9, {  x:12, letterSpacing:'+=0.0em', ease:Expo.easeOut}, "label--0A+=0.0")
.from(h1_h2, 0.9, {autoAlpha: 0, ease:Power1.easeOut}, "label--0A+=0.0")


.from(rp_BTM, 0.6, { autoAlpha: 0, y:'4em', ease:Expo.easeOut, force3D:true}, "label--0B+=0.0")

.from(Vol_cont, 0.9, { yPercent:8,  ease:Expo.easeOut, force3D:true}, "label--0B+=0.0")
.from(center_button, 0.9, { y:8,  ease:Expo.easeOut, force3D:true}, "label--0B+=0.0")
.from(btm_right, 0.9, { y:8,  ease:Expo.easeOut, force3D:true}, "label--0B+=0.0")

.to(vol_prog, 0.9, { width:'75%', ease:Expo.easeOut, force3D:true}, "label--0B+=0.0")
.to(vol_handle, 0.9, { left:'100%', ease:Expo.easeOut, force3D:true}, "label--0B-=0.075")

.set('#Circle-Outline', {rotation: -90, }, "label--0X+=0.0")
.to('#Circle-Outline', 0.9, {opacity: 0.1, strokeDasharray: '133 133', strokeDashoffset: 266, ease:Power2.easeOut}, "label--0X+=0.0")

.from($("#Play-Pause").find('i'), 0.3, {scale: 0.25, opacity: 0.15, ease:Power3.easeInOut}, "label--0B+=0.12")
//.from($("#Play-Pause").find('i'), 0.6, {opacity: 0.25, ease:Power1.easeOut}, "label--0B+=0.06")

.fromTo("#Circle-gsap", 1.2, { opacity: 0.05}, {opacity: 0.00, ease:Power0.easeOut}, "label--0B+=0.12")
.fromTo("#Circle-gsap", 1.2, {attr:{r:'0em'} }, {attr:{r:'21.0em'}, ease:Expo.easeOut}, "label--0B+=0.18")
;
     
  RP_cont.hover(function(){
    $(this).toggleClass('active');
    rp_img.toggleClass('active');

      if ( $(this).hasClass('active') ) {
        RPhover_tl.play().timeScale(1.0); 
     } 
      else {
        RPhover_tl.reverse().timeScale(2.5); ;
     }
  });
   
   
   
  Play_SVG.click(function(){
      rp_BTM.toggleClass('active');
      $('#Btm-Img-Blur').toggleClass('active');
      $(this).toggleClass('active');
     
     if ( $(this).hasClass('active') ) {
       setTimeout(function(){idPlayer.play();},1500);
       
       TweenMax.set('iframe', { autoAlpha:0, scaleY: 1,});
       TweenMax.to('iframe', 0.6, {delay:0.6, autoAlpha:1, ease:Power1.easeIn});
       //container shadow
       TweenMax.to(RP_cont, 1.25, {width: 640, height:360, boxShadow: '0.5em 1em 1em 0em rgba(0,2,6,0.08), 1em 2em 4em 0em rgba(0,2,6,0.08), 0em 0em 0em 0em rgba(0,2,6,0.06), 0em 0em 0em -4em rgba(0,2,6,0.12), 0em 0em 2em -4em rgba(0,2,6,0.12)',  ease:Cubic.easeInOut});
       //BTM-bar shadow
    //   var tween_RP_Expands = TweenMax.to(rp_BTM, 1.5, {boxShadow: '0em -4em 8em 0em rgba(0,2,6,0.03)', ease:Expo.easeOut});
   //   var tween_RP_Expands = TweenMax.to('#Btm-Img-Blur', 2, {scale: 0.67, opacity:0,  ease:Expo.easeOut});
       TweenMax.to(rp_BTM, 0.5, {backgroundColor: 'rgba(253, 254, 255, 0.95)', ease:Power2.easeInOut});
       TweenMax.to(video_BG, 1.0, {delay:0.1, height:'100%', opacity:1, ease:Expo.easeInOut});
       TweenMax.to(rp_img, 1.10, {delay:0.0, scale:0.5, opacity:0.0, ease:Expo.easeInOut});
       
       TweenMax.set(rp_h1, {transformOrigin:'10% 15em'}); 
       TweenMax.set(rp_h2, {transformOrigin:'10% 10em'});
       TweenMax.to(h1_h2, 1.10, {delay:0.0, scale:0.75, opacity:0.0, ease:Expo.easeInOut, force3D:false,});
     } 
      else {
        setTimeout(function(){idPlayer.pause();},500);
        TweenMax.set('iframe', { autoAlpha:1, scaleY: 1,});
        TweenMax.to('iframe', 0.5, { autoAlpha:0, scaleY: 0, ease:Power4.easeOut});
        
        TweenMax.to(RP_cont, 1.5, {width: 360, height: 360,boxShadow: '0em 14em 21em 0em rgba(0,2,6,0.05), 0em 40em 15em -23em rgba(0,2,6,0.08), 0em 55em 30em -23em rgba(0,2,6,0.12), 0em 60em 55em -23em rgba(0,2,6,0.10), 0 50em 120em -23em rgba(0,2,6,0.24)',  ease:Expo.easeOut});
        
      //  var tween_RP_Expands = TweenMax.to(rp_BTM, 1.5, {boxShadow: '0em 0em 0em 0em rgba(0,2,6,0.02)',  ease:Expo.easeOut});
      //  var tween_RP_Expands = TweenMax.to('#Btm-Img-Blur', 1.5, {scale: 1, opacity:0.3,  ease:Expo.easeOut});
        TweenMax.to(rp_BTM, 1.0, {backgroundColor: 'rgba(253, 254, 255, 0.3)', ease:Expo.easeInOut});
        TweenMax.to(video_BG, 1.25, {height:'65em',opacity:0, ease:Expo.easeOut});
     //   TweenMax.to(video_BG, 0.1, {delay:0.25, opacity:0.0,  ease:Power0.easeOut});
        TweenMax.to(rp_img, 1.5, {delay:0.0, scale:1, opacity:0.95, ease:Expo.easeOut});
        
        TweenMax.to(rp_h1, 1, {transformOrigin:'38% 9em', opacity:0.7}); 
        TweenMax.to(rp_h2, 1, {transformOrigin:'38% 7em', opacity:0.4});
        TweenMax.to(h1_h2, 1.5, {delay:0.0, scale:1, ease:Expo.easeOut, force3D:false,});
     }
  });

  
   
});

            
          
!
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