Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
ijwebbdesign

Slider and play/pause-button conflict

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi Greensock!

 

I have created an animation that include a slider that control the timeline. The animation also include a play/pause button for the timeline.

 

The animation almost works perfect, except a minor detail.

 

The problem is that if I pause the animation with the button and then move the sliders playhead the animation will automatically start. I want that the animation stays paused, even if the sliders playhead is moved.

 

I wan´t that my timeline-slider works the same way as the Youtube-slider.

 

(I have used the same slider as the one in the Greensock homepage animation.)

 

How do I solved the conflict between the slider and the play/paus button?

 

Thanks in advance.

Ingemar 

 

 

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

Link to comment
Share on other sites

Hi IJ,

 

What you need to do is record the state of timeline when the user first drags the slider, i.e. whether it's playing or paused. Then you can figure out what to do when the user stops the slider.

 

 

var isPaused;

$slider.slider({
  range: false,
  min: 0,
  max: 100,
  step: 0.1,
  slide: function (event, ui) {
    timeline.progress( ui.value / 100 ).pause();
  },
  start: function (event, ui) {
    isPaused = timeline.paused();
  },
  stop: function (event, ui) {
    if (!isPaused) timeline.resume();
  }
});

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

  • Like 3
Link to comment
Share on other sites

Thanks!

 

I´m new to the Greensock community. But I will say that i'm very impressed with your customer support so far!  :-P

 

Best regards!

Ingemar 

  • Like 1
Link to comment
Share on other sites

Yeah, OSUBlake is one of our community heroes. Can't say enough good things about guys like him, Jonathan, Rodrigo, JamieJefferson, Diaco.AW, just to name a few. They make these forums so much better than they would be otherwise. 

 

Happy tweening!

  • Like 4
Link to comment
Share on other sites

Hi IJ,

 

What you need to do is record the state of timeline when the user first drags the slider, i.e. whether it's playing or paused. Then you can figure out what to do when the user stops the slider.

 

 

var isPaused;

$slider.slider({
  range: false,
  min: 0,
  max: 100,
  step: 0.1,
  slide: function (event, ui) {
    timeline.progress( ui.value / 100 ).pause();
  },
  start: function (event, ui) {
    isPaused = timeline.paused();
  },
  stop: function (event, ui) {
    if (!isPaused) timeline.resume();
  }
});

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

 

Hi again!

My animation works a lot better now, but I found a new issue between the slider and the play/pause-button.

 

If I move the sliders playhead when the animation is running. Then the play/pause-button for some reason change from "pause" to "play". So the problem is that the play/pause-button say "play", even if the animation is running.

 

I would be perfect if the interaction between the play/pause-button and the slider works the same way as the Youtube- and Spotify-slider.

Link to comment
Share on other sites

Hi again!


My animation works a lot better now (I have used exactly the same code that I got from OUSblake), but I found a new issue between the slider and the play/pause-button.


 


If I move the sliders playhead when the animation is running. Then the play/pause-button for some reason change from "pause" to "play". So the problem is that the play/pause-button say "play", even if the animation is running.


 


I would be perfect if the interaction between the play/pause-button and the slider works the same way as the Youtube- and Spotify-slider.


Link to comment
Share on other sites

Hi Ingemar, 

 

It would help if you made a CodePen of the problem so we can see how or what is changing the play/pause button. 

 

In the example above, when the user drags the slider it pauses the timeline. What causes the button to change when the timeline is paused in your code? Are you using some data binding library like Angular, Knockout, or React to change the button?

 

You are probably going to have to add in some logic in your slide function to prevent the button from changing.

slide: function (event, ui) {
  timeline.progress( ui.value / 100 ).pause();
  if (!isPaused) {
    // Don't change the button to pause
  }
}
  • Like 1
Link to comment
Share on other sites

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

 

Hi OSUblake,

 

I took all your code from your Codepen and then put them in three separate files ("greensocksupport.html",  "greensocksupport.css" and "greensocksupprt.js") and then tested them without adding any code from my project, except from a jQuery file for my slider (more of that later on). This was how I found out about the new button-issue. 

 

What I found a bit interesting is the difference between how your code in the Codepen works compared to the same code in the three separate files ("greensocksupport.html",  "greensocksupport.css" and "greensocksupprt.js").

 

Here is the difference:

If I move the playhead in the animation that consist of the three separate files. Then the button immediately goes from "pause" to "play". I't doesn't matter how long the animation has played, or where i drag the slider.

 

This isn't the case with your code on the Codepen-site. Here I have to drag the slider to the beginning of the animation. Then the button goes from "pause" to "play", even if the animation is running.

 

As I mention earlier I'm using a jquery-ui.css file for the slider. Maybe this file create some trouble? I have passed in that code in the css-part in the new Codepen under the comment "jquery-ui.css.

 

I'm testing the animations in Google Chrome.

 

I'm not so sure how to add the logic in the slider-function that you mentioned. Can you help me with that?

 

Thanks in advance. 

Link to comment
Share on other sites

Hi ijwebbdesign,

 

There is no clear plausible reason why the behavior of your code would change between CodePen and your site. 

Perhaps you can share a link to the files on your site AND a zip of them so that we can take a peak. 

And please, only the html, css and js to reproduce the issue of the button mysteriously changing.

 

I don't think Blake is going to be able to help you any more with preventing the button from automatically changing unless he can see it changing. 

make sense?

  • Like 2
Link to comment
Share on other sites

Hi Carl,

 

Ok, I understand. 

 

If you take a look at Blake's Codepen, you will easily that when you move the sliders playhead to to beginning of the animation when the animation is running. Then the play/pause-button will automatically go from "pause" to "play". So the animation will be running and at the same time the play/pause-button will be saying "play", instead of "pause".

 

So the button is mysteriously changing in the Codepen-example as well. So maybe the answer to the buttonmystery can be found in Blake's Codepen?

 

Have a nice day guys!   

Link to comment
Share on other sites

Oh wow, now I see some weird stuff going on. 

 

The problem with moving the playhead to beginning was caused by on an onReverseComplete callback, so I removed that. 

 

If the timeline is paused, the slider cannot move the timeline progress beyond 0.999. It needs to go to 1 to be 100% complete. Changing the UI Slider's max to 100.1 fixed that.

 

Here's an updated version

 

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×