<div class="overflow">
  <section class="panels">
    <article class="panels__side panels__side--left">
      <div class="panels__side panels__side--inner-left">
        <p>"Changes and progress very rarely are gifts from above. They come out of struggles from below."</p>
      </div>
      <div class="panels__side panels__side--inner">
        <h1 class="panels__headline">Noam Chomsky</h1>      
        <svg class="arrow arrow--left" width="40" height="40" viewBox="0 0 24 24"><path d="M0 0h24v24h-24z" fill="none"/><path d="M20 11h-12.17l5.59-5.59-1.42-1.41-8 8 8 8 1.41-1.41-5.58-5.59h12.17v-2z"/></svg>
      </div>
    </article>
    <article class="panels__side panels__side--right">
      <div class="panels__side panels__side--inner">
        <h1 class="panels__headline">Buzz Aldrin</h1>
        <svg class="arrow arrow--right" width="40" height="40" viewBox="0 0 24 24"><path d="M0 0h24v24h-24z" fill="none"/><path d="M12 4l-1.41 1.41 5.58 5.59h-12.17v2h12.17l-5.58 5.59 1.41 1.41 8-8z"/></svg>
      </div>
      <div class="panels__side panels__side--inner-right">
        <p>"The biggest benefit of Apollo was the inspiration it gave to a growing generation to get into science and aerospace."</p>
      </div>
    </article>
  </section>
</div>
<!-- Ettrics -->
<a href="http://ettrics.com/code/dual-sliding-panels/" class="logo" target="_blank">
 <img class="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/45226/ettrics-logo.svg" alt="" /> 
</a>

// utils
yellow = #F4D03F
blue = #19B5FE
easeout()
  transition: all .5s cubic-bezier(0.23, 1, 0.32, 1)
align()
  display: flex
  align-items: center
  justify-content: center
cover()
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%

// base
*
  box-sizing: border-box
  -webkit-tap-highlight-color:  rgba(255, 255, 255, 0); // remove tap highlight on android chrome

body
  font-family: 'Montserrat'
  line-height: 1.5
  -webkit-font-smoothing: antialiased

// component
.overflow
  height: 100vh
  overflow: hidden
  
.panels
  width: 200%
  
  &__side
    float: left
    width: 50%
    perspective: 400px
    align()
    easeout()
    
    &--left,
    &--right
      will-change: transform
      position: relative
      left: -25%
      transform: translate(0, 0)
      
    &--left
      background: yellow
      
      &:hover
        .arrow
          transform: translate(-100%, -50%)
      
    &--right
      background: blue
      
      &:hover
        .arrow
          transform: translate(0, -50%)
      
    &--left-active
      transform: translate(50%, 0)
      
      .panels__side--inner-left
        transform: rotateY(0)
        
      .arrow
        transform: translate(-50%, -50%) rotate(180deg) !important
      
    &--right-active
      transform: translate(-50%, 0)
      
      .panels__side--inner-right
        transform: rotateY(0)
        
      .arrow
        transform: translate(-50%, -50%) rotate(180deg) !important
      
    &--left-hidden
      transform: translate(-50%, 0)
    
    &--right-hidden
      transform: translate(50%, 0)
      
    &--inner
      cursor: pointer
      
    &--inner-left,
    &--inner-right,
    &--inner
      will-change: transform
      padding: 0 5vw
      height: 100vh
    
    &--inner-left
      transform-origin: right center
      transform: rotateY(-90deg)
      transition-delay: .1s
      background: url('//unsplash.it/1330/900') center/cover
      
      &:before
        content: ""
        cover()
        background: yellow
        z-index: -1
        opacity: 0.85
      
    &--inner-right
      transform-origin: left center
      transform: rotateY(90deg)
      transition-delay: .1s
      background: url('//unsplash.it/1250/900') center/cover
      
      &:before
        content: ""
        cover()
        background: blue
        z-index: -1
        opacity: 0.85
      
  &__headline
    margin: 0
    font-size: 40px
    text-align: center
    color: lighten(black, 10)
    
  p
    font-size: 30px
    margin: 0
    
  @media (max-width: 640px)
    width: 100%
    height: 200vh
    
    &__side
      float: none
      width: 100%
      height: 100vh
      display: block
      text-align: center
      
      &--left,
      &--right
        top: -25%
        left: 0 
        
      &--left
        &:hover
          .arrow
            transform: translate(-50%, -80%) rotate(90deg)
            
      &--right
        &:hover
          .arrow
            transform: translate(-50%, -20%) rotate(90deg)
        
      &--left-active
        transform: translate(0, 50%)
      
        .panels__side--inner-left
          transform: rotateX(0)
        
        .arrow
          transform: translate(-50%, -50%) rotate(-90deg) !important
      
      &--right-active
        transform: translate(0, -50%)

        .panels__side--inner-right
          transform: rotateX(0)

        .arrow
          transform: translate(-50%, -50%) rotate(-90deg) !important

      &--left-hidden
        transform: translate(0, -50%)

      &--right-hidden
        transform: translate(0, 50%)
        
      &--inner-left,
      &--inner-right,
      &--inner
        height: 50vh
        padding: 2vh 8vw
        align()
        
      &--inner-left
        transform-origin: center bottom
        transform: rotateX(90deg)
      
      &--inner-right
        transform-origin: center top
        transform: rotateX(-90deg)
        
    &__headline
      font-size: 32px
        
    p
      font-size: 20px
  
.arrow
  position: absolute
  top: 75%
  left: 50%
  transform: translate(-50%,-50%)
  fill: lighten(black, 10)
  border: 3px solid lighten(black, 10)
  border-radius: 50%
  easeout()
  
  @media (max-width: 640px)
    transform: translate(-50%, -50%) rotate(90deg)
    
    &--left
      top: 25%
      
.logo
  position: fixed
  bottom: 3vh
  right: 3vw
  z-index: 2
  
  
  img
    width: 45px
    transform: rotate(0)
    easeout()
  
    &:hover
      transform: rotate(180deg) scale(1.1)

var Panels = (function() {
  
  var panelLeft = document.querySelector('.panels__side--left');
  var panelRight = document.querySelector('.panels__side--right');

  var openLeft = function() {
		panelLeft.classList.toggle('panels__side--left-active');
    panelRight.classList.toggle('panels__side--right-hidden');
  };

  var openRight = function() {
    panelRight.classList.toggle('panels__side--right-active');
    panelLeft.classList.toggle('panels__side--left-hidden');
  };
  
  var bindActions = function() {
    panelLeft.addEventListener('click', openLeft, false);
    panelRight.addEventListener('click', openRight, false);
  };
  
  var init = function() {
    bindActions();
  };
  
  return {
    init: init
  };
 
}());

Panels.init();