thanks for the reply, heres the code i have so far. The pause function pauses the animation perfectly and so does clicking on the slider but I just need this animation state and slider position carried across. Is this at all possible?
<div id='image'> <img src="/001.jpg" /> <img src="/002.jpg" /> <img src="/003.jpg" /> <img src="/004.jpg" /> <img src="/005.jpg" />
<div id="slider"></div> </div> <div id="bar"> <button id="play">play</button> <button id="pause">pause</button> <button id="reverse">reverse</button> <button id="restart">restart</button> </div>
var images = $('#image').children(), // images in the sequence fps = 1, duration = 1 / fps; var tl = new TimelineLite({onUpdate:updateSlider}) .staggerTo(images, 0, {position: 'static', visibility: 'visible' }, duration, 0) .staggerTo(images.not(images.last()), 0, {position: 'absolute', visibility: 'hidden', immediateRender: false }, duration, duration) .set({}, {}, "+="+duration); $("#play").click(function() { //play() only plays forward from current position. If timeline has finished, play() has nowhere to go. //if the timeline is not done then play() or else restart() (restart always restarts from the beginning). if(tl.progress() != 1){ tl.play(); } else { tl.restart(); } }); $("#pause").click(function() { tl.pause(); }); $("#reverse").click(function() { tl.reverse(); }); $("#restart").click(function() { tl.restart(); }); $("#slider").slider({ range: "max", min: 0, max: 100, step:1, value: 20, slide: function ( event, ui ) { tl.pause(); //adjust the timeline's progress() based on slider value tl.progress( ui.value/100 ); } }); function updateSlider() { $("#slider").slider("value", tl.progress() *100); } });
