GSAP timeline breaking in conjunction with Draggable plugin

[Moritz L]

Hi! I am working on scrubbable video controls. I recreated the most simple version of the controls (without video and animated time) in a CodePen.

I've also read this entry in the forums. But even though the problem is the same, the solution didn't seem to apply to my problem – or I am just not seeing it. 

 

The problem: My player works just fine when you click on "play", then "pause" and then drag the playhead around. When you then click "play" again, the playhead starts animating from the respective position as intended. BUT: When you hit "play" and drag the playhead without hitting "pause" first, the timeline animation doesn't work anymore. To be precise: The playhead won't animate anymore (until you rerun the code), yet the track fill will resume animating.

 

Play around with the CodePen and you'll see what I mean.

 

My best guess: It has something to do with the inline styles that are applied by GSAP. Because, when I am changing Draggable.type to "left", the animation is resuming also when not hitting "pause" before starting to drag. But then the dimensions seem to off and the playhead doesn't move in sync with the track anymore. And I haven't found a solution for that problem either. 

 

I really appreciate any pointing in the right direction. 

 

Thanks!

See the Pen YzRewPL by moritzlaube (@moritzlaube) on CodePen

[Rodrigo]

Hi,

 

How about something like this:

See the Pen dyQdNEV by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Moritz L]

Yes, @Rodrigo, that Pen helped! Thanks. The trick was to actually kill the Tween and recreate it with an updated duration in the onDragEnd hoog of the Draggable Plugin. Cheers!