Jump Animation

by iDVB

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineLite.min.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<iframe width="560" height="315" src="//www.youtube.com/embed/4NZQdtc0-Ys?rel=0&autoplay=1&loop=1" frameborder="0" allowfullscreen></iframe>

<div id="slider">
    <div class="wrapper">
        <img src="http://lorempixel.com/400/200/sports/1/" />
        <img src="http://lorempixel.com/400/200/sports/2/" />
        <img src="http://lorempixel.com/400/200/sports/3/" />
    </div>
</div>

<div id="sliderbar"></div>
<input id="btnPlay" type="button" value="Play" />
<input id="btnPause" type="button" value="Pause" />

CSS

body {
    text-align:center;
}

#slider {
    position:relative;
    width:400px;
    height:205px;
    background:black;
    margin:20px auto;
    overflow: hidden;
    /*padding-top:50px;
    height:300px;
    */
}

#slider .wrapper {
    position:relative;
    height:200px;
    width:1500px;
    -webkit-transform: translateZ(0);
}

#slider .wrapper img {
    float:left;
    display:block;
    margin:0 0 0 0;
    padding:0;
    border:0;    
    -webkit-transform: perspective(800);
}
#slider .wrapper img:first-child {
    margin-left:0;
}

#sliderbar {
    width:300px;
    margin:20px auto;
}

JavaScript

var $slider = $('#slider');
var $wrapper = $('.wrapper', $slider);
var $img = $('img', $wrapper);
var $btnPlay = $('#btnPlay');
var $btnPause = $('#btnPause');
var xMove = $slider.innerWidth();

var tm = new TimelineMax({delay:2, repeatDelay:2, repeat:-1, yoyo:true, onUpdate:updateSlider});

tm
.to($img[0], 0.4, {scale:0.65})
.to($wrapper, 0.8, {x:-xMove, ease:Power3.easeInOut}, '-=0.4')
.fromTo($img[1], 0.4, {scale:0.65}, {scale:1}, '-=0.4')

.to($img[1], 0.4, {scale:0.65, delay:2})
.to($wrapper, 0.8, {x:'-=' + xMove, ease:Power3.easeInOut}, '-=0.4')
.fromTo($img[2], 0.4, {scale:0.65}, {scale:1}, '-=0.4')
;
tm.timeScale(1);


var $slider = $( "#sliderbar" ).slider({
  slide: function( event, ui ) {
      console.log(ui.value);
      tm.pause();
      tm.progress( ui.value/100 );
  }
});

function updateSlider(){
    $slider.slider("value", tm.progress() *100);
}

$btnPlay.click(function(){
    tm.play();
});

$btnPause.click(function(){
    tm.pause();
});