Remember uislider state/position

[Cupracing]

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!

[PointC]

Hi Cupracing 

 

Welcome to the forums.

 

For the best help, we would love to see your code.

 

Could you create a CodePen for us? Please follow this link to learn more about that.

 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Regarding sliders, check these out for inspiration and learning - 

 

Diaco has some cool demos:

See the Pen XmozON by MAW (@MAW) on CodePen

See the Pen yYradO by MAW (@MAW) on CodePen

 

Blake has a really nice example here:

See the Pen ZbdxRx by osublake (@osublake) on CodePen

 

Happy tweening and welcome aboard.

[Jonathan]

Hello Cupracing,

 

As far as how to use HTML5 SessionStorage .. It is not really a GSAP related question.

 

In the Forum, we need to focus on answering questions that have to do with using the GSAP API.

 

I'm sure that you can read up on the HTML5 SessionStorage spec here on MDN here:

 

https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

 

I'm sure if you have any GSAP related questions regarding sliders, that we will be more than happy to help you answer any of your questions

 

And a codepen example like Craig (PointC) advised will help us test your GSAP code live.

 

Thanks and Happy Tweening!

[Cupracing]

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

[Cupracing]

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

[Carl]

Sorry to hear you are having problems, but I really can't do much more than echo what the moderators previously said.

 

Managing sessions storage and the related logic is just way beyond the scope of our free support. In order to provide the best support for everyone its crucial that we stick to questions related to GreenSock products. It might take someone 2 or 3 hours to do something like this and explain it properly in a way that makes sense. There are many pieces to this puzzle

 

1. knowing what the current state is
2. writing / saving that state to local storage
3. checking on page load if there is local storage
4. configuring your slider so that it can automatically jump to a particular state if local storage value is present (some tips below)

Unfortunately none of those things are handled by our tools.

 

My suggestion would be to google some local storage tutorials and try to get that working in a demo without any of the slider code and slowly build up from there.

 

Jumping to saved state:

 

If you have 4 images, each displaying for 1 second and you need to display the saved state of image 3 you can do something like:

savedState = 3; // read from local storage or cookie

tl.pause(savedState - 1);

Like the others said, its really tough to help without a CodePen demo and we really have to focus on the GreenSock stuff. For general web-dev questions you can't beat http://stackoverflow.com/

[Cupracing]

have saved a codepen, if anyone wants a play

 

See the Pen jqzWre by anon (@anon) on CodePen

[dada78]

Hi Cupracing 

 

Welcome to the forums.

 

For the best help, we would love to see your code.

 

Could you create a CodePen for us? Please follow this link to learn more about that.

 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Regarding sliders, check these out for inspiration and learning - 

 

Diaco has some cool demos:

See the Pen XmozON by MAW (@MAW) on CodePen

See the Pen yYradO by MAW (@MAW) on CodePen

 

Blake has a really nice example here:

See the Pen ZbdxRx by osublake (@osublake) on CodePen

 

Happy tweening and welcome aboard.

 

Hi guys,

this demo by Diaco: 

See the Pen XmozON by MAW (@MAW) on CodePen

 is exactly what I was looking for to create a simple slider, so thanks for that! I have trouble however removing the logic for the "dot" navigation. Could someone help me out with this? Thanks so much!

[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

 

See the Pen jqzymL?editors=1010 by anon (@anon) on CodePen

[OSUblake]

Nice! Glad you got it working.

 

Now what does @dada78's question have to do with this?

 

No dots...

See the Pen oxqQZV?editors=0010 by osublake (@osublake) on CodePen