Cupracing

In case it helps any future members out. This is the solution is was after. Many thanks to Jake for helping me with it http://codepen.io/anon/pen/jqzymL?editors=1010

have saved a codepen, if anyone wants a play http://codepen.io/anon/pen/jqzWre

really struggling with this guys, please can someone help me find a way to save the state of the animation.

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); } });

Im new to gsap and also jquery. I'm currently working on an offline page where I use a slider to animate between a series of jpg images to create an animation. Also have play, pause reverse buttons set. So far it's working as it should although I would prefer a simpler way to list the images in the div rather than do them separately. Any ideas? What I would ultimately like to do is have the uislider remember its position between we pages and refresh as I would like to have different images on these pages to represent different views. I have read up on sessionstorage but not sure how to implement this. Any help would be awesome!