<div class="slider-holder">
<div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 0%;"></span></div>
  </div>


<div class="wrapper">
  <ul class="list" id="list">
    <li><span>Projects</span></li>
    <li><span>Awards</span></li>
    <li><span>About</span></li>
    <li><span>Contact</span></li>
    <li><span>Themes</span></li>
    <li><span>Services</span></li>
    <li><span>Layout</span></li>
    <li><span>Projects</span></li>
    <li><span>Awards</span></li>
    <li><span>About</span></li>
    <li><span>Contact</span></li>
    <li><span>Themes</span></li>
    <li><span>Services</span></li>
    <li><span>Layout</span></li>
  </ul>
</div>

<div class="hidden-area"></div>

body {
  margin: 0;
  overflow-x: hidden;
}

.wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000;

}
.list {
    position: relative;
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    padding-top: 40vh;
  
  li {
     position: relative;
    font-size: 10vh;
    color: #fff;
    list-style: none;
    line-height: 17vh;
    //background: rgba(255,255,255,0.1);
    margin-bottom: 10vh;
  }
  span {
    display:inline-block;
  }
}

.line {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  left:0;
  width: 100%;
  height: 1px;
  background-color: red;
  z-index: 1;
}
.slider-holder {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 80px;
  z-index: 10;
  
}
#slider {
    margin: 30px auto;
    background-color: grey;
    display: inline-block;
    border-radius: 0;
    height: 1px;
    left: 20%;
    right: 20%;
    position: absolute;
}

#slider, #slider a {
  background-image: none;
  border: none;
}
#slider a {
  background-color: #444;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: none;
    background: #555;
    font-weight: normal;
    color: #555555;
      top: -0.5em;
    border-radius: 50%;
  cursor: pointer;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent; 
}

.hidden-area {
  background: #000;
  height: 20vh;
  width: 100%;
  bottom: 0;
  left:0;
  position: fixed;
}

var featuresList = $("#list");
var featuresListItems = $("#list li");
var featuresListItemsTitle = $("#list li span");

TweenLite.set(featuresListItems, {perspective:400});
var contentHeight = featuresList.outerHeight();
var window_h = jQuery(window).innerHeight();
var halfWindow = ( $(window).height() / 2);
var tl_list = new TimelineMax({paused: true});
var $window = $(window);
var $slider = $("#slider");



jQuery('body').css("height", contentHeight+window_h);
   featuresListItemsTitle.each(function(index, element){
    tl_list.to(element, 2, {rotationX:60, alpha:0, transformOrigin:"50% 50% -225", ease:Linear.easeNone}, 1 * index);
})
  
$window.scroll(function(){
    var st = $(this).scrollTop();
    var ht = featuresList.height();
   if( st < ht && st > 0 ){
        windowScroll =  st/ht;
        tl_list.progress(windowScroll);
    }

  var tl_scroll = new TimelineMax();
    tl_scroll.to(featuresList, 2, {
      y: -st,
      ease: Power3.easeOut
    });
  
})



/* --- controls --- */

$slider.slider({
    range: false,
    min: 0,
    max: 100,
    step: 0.02,
    value: 0,
    slide: function(event, ui) {
        tl_list.progress(ui.value / 100).pause();
        console.log(ui.value);
        TweenLite.to(featuresList, 2, {
          y: -ui.value+"%",
          ease: Power3.easeOut
        }); 
    }
});