Basic Timeline example with slider
A Pen by Dave Stewart on CodePen.
Basic Timeline example with slider
A Pen by Dave Stewart on CodePen.
<div id="stage"> | |
<div class="box" id="box1"></div> | |
</div> | |
<div id="timeline"> | |
<span></span> | |
</div> | |
// ---------------------------------------------- | |
// SETUP | |
// ---------------------------------------------- | |
// variables | |
var none = Power0.easeOut; | |
// objects | |
var $timeline = $('#timeline'); | |
var $playhead = $('#timeline span'); | |
// timeline manipulation | |
function onUpdate() | |
{ | |
var p = tl.progress(); | |
var t = tl.totalTime(); | |
var d = tl.totalDuration(); | |
var c = d * p; | |
$playhead.width((p * 100) + '%').text('Time:' + t.toFixed(3)); | |
} | |
$timeline | |
.on('mousemove', function(event){ | |
var w = $timeline.width(); | |
var x = event.offsetX; | |
var p = x / w; | |
tl.pause().progress(p); | |
}) | |
.on('mouseout', function(event){ | |
tl.resume(); | |
}); | |
// ---------------------------------------------- | |
// animation | |
// ---------------------------------------------- | |
// elements | |
var box1 = $('#box1').get(0); | |
// timeline | |
var tl = new TimelineLite({onUpdate:onUpdate}); | |
// animate main box | |
tl.to(box1, 10, {left:750, ease:none}, 0); |
/* layout */ | |
body{ | |
width:800px; | |
font:12px normal "Arial", sans-serif; | |
} | |
#stage { | |
position:relative; | |
height:200px; | |
background-color:black; | |
} | |
#timeline { | |
width:100%; | |
height:50px; | |
background-color:#ccc; | |
margin-top:5px; | |
} | |
#timeline span{ | |
display:block; | |
background:rgba(0, 0, 0, 0.5); | |
height:50px; | |
width:50%; | |
} | |
/* elements */ | |
.box { | |
width:50px; | |
height:50px; | |
position:absolute; | |
} | |
#box1 { | |
background-color:red; | |
} |
links are all dead...