Sync timeline + scrub with onpress in draggable

[bromel]

Hi all, I just playing around with draggable some more, and I am trying to get a better understanding of how it works. I have created a simple draggle timeline with an attached tween.

 

I am now wanting to be able to to click on the scrub and position both the scrub and timeline accordingly. At the moment it is quite hit and miss and I am just trying to understand it better.

 

So any help would be most appreciative.

 

tnxs

 

Bromel

See the Pen mXEmZG?editors=1111 by w9914420 (@w9914420) on CodePen

[GreenSock]

Are you familiar with GSDevTools? It'd probably make this much, much, MUCH easier and give you a lot of extra controls. https://greensock.com/gsdevtools

 

It's literally as simple as calling GSDevTools.create(). Done. 

 

Anyway, as for your demo, it looks like there are quite a few issues with the logic and I'm not quite sure where to start. It seems like you're trying to use both the scrubber AND the bar for similar purposes with a single Draggable instance and I don't see how that could work. I'd say it's best to make the draggable thing the Draggable target (in this case, the scrubber). Then, treat the bar separately - add a mousedown/touchstart/pointerdown event listener and do the logic to figure out how far along it is proportionally so that you can force the scrubber to that spot and startDrag() from there. You can still just have the scrubber's onDrag be the only thing that controls the tween's progress(). 

 

But again, hopefully GSDevTools delivers what you're after

[bromel]

@GreenSock Hi Jack, many thanks for the insight, I guess GSDevTools would be a more sensible option, but I just wanted to see if I could achieve something simply and also broaden my understanding of draggable. I think I get what you are saying so:

 

1. Seperate the scrubber and the bar logic

2. create a mousedown/touchstart/pointerdown event listener and do the logic for the bar

3. Use the scrubber to just control the timeline  only

 

I think I will give it another shot

 

tnxs Jack

 

 

[bromel]

@GreenSock so Jack just out of interest Sahil helped me to develop an audio player that was synced with a timeline, would it be possible to do the same thing with the GSDevTools.

 

See the Pen Eoqgdr by Sahil89 (@Sahil89) on CodePen

 

many tnxs

[bromel]

@Greensock - Hey jack, I had another revisit to the problem and came up with this: Is there any caveats to this method, it appears to work but might not be correct. what do you think? 

 

 

See the Pen KQWqJL by w9914420 (@w9914420) on CodePen

 

many tnxs for your help

[GreenSock]

Seems to work, though I'd put a updateRange() call at the end of your updatePosition() method just so that it updates the position of things when you click (and don't drag yet). Nice work.

 

And yeah, I'm sure you could wire up an audio thing to GSDevTools if you needed to. Note that GSDevTools is responsive too, and fills the container (which is a whole different challenge).

[bromel]

@GreenSock Hi Jack, I did apply and updateRange() at the end of the updatePosition(), but it seems to break things. Is not the onPress() call doing that anyway since draggable's update function is been called when this is triggered (I am just assuming).

 

I think with GSDevTools there is a lot more work involved in hooking it all up, But GSDevTools is really good, been playing around with it  

[bromel]

@GreenSock Hi jack I spoke too soon, I am not sure if I have found a bug or it's a case of adding some numbers somewhere, anyways I noticed that if you click right on the edge of the volume bar container the timeline goes right to the end. I was trying to work out way and it seems as if the this.x value gives you a negative integer. which bugs things up.

 

 

However we do not get the same effect when we click right on the edge of the volume bar container at the end of the timeline

 

 

I just thought you might know whats going on.

 

tnxs again

 

P.s I updated the pen

 

See the Pen KQWqJL?editors=1111 by w9914420 (@w9914420) on CodePen

 

[GreenSock]

Yeah, I don't think that's a bug or anything - it's just that based on the bounds, there's a chance that x could come back as a super small number. So I'd just add a little conditional logic to your function, kinda like: 

var x = this.x;
if (x < 0.0001 && x > -0.0001) {
  x = 0;
}
t2.progress(x / ...);

 

Also, why did you think it'd take a lot more effort to wire up GSDevTools? It should be crazy simple, but perhaps I'm missing something. 

[bromel]

@GreenSock Hi Jack, thanks for the insight, absolutely brilliant.

 

In regards to GSDevTools, I was speaking in regards to myself implementing the code, JavaScript is a bit of an illusive creature in my mind, if you asked me to do a complex Tween, I could probably pull it off. But ask me to use JavaScript to build something from scratch, I struggle to do so. Google is my life line

 

Anyways tnxs again Jack, your support is awesome!!!

 

[GreenSock]

No problem at all. 

 

Regarding wiring it up to GSDevTools, what's the biggest challenge? Is the problem that you want to skin it in some custom way (you want it to look different)? Or is it just that you're not sure how to wire it up to your own tween/timeline? If it's the latter, it's literally as simple as:

GSDevTools.create({
  animation:yourTweenOrTimeline,
  globalSync:false //optional, but probably what you'd want.
});

 

Done.

 

I'm not trying to say you NEED to use GSDevTools - I just figured it might be a really good solution if your goal is to hook up a scrubber to your animation. It solves a bunch of problems for you already. But it's totally fine to build your own if you prefer. 

 

Happy tweening!

[bromel]

@GreenSock So I best explain - I wanted to build a player that would allow me to synchronize both audio and tween together for which @Sahil has helped and done a cracking job on it. Seeing the power and the potential that GSDevTools has. It seems like a no-brainier to use it instead, since you have incorporated mobile and responsive considerations. For me the task would be to create a method of doing this, which would be challenging, but I also suspect that there is a 'best approach method' with GSDev's Architecture of doing this in the best way and that is beyond my capabilities (in my mind) 

 

But in terms of using it, no I do understand it, it is super easy to use  

Has for customizing it, it is relatively straight forward (for me) below is the unofficially 'Be my Valentine' non-dev theme

 

See the Pen JpWwRN by w9914420 (@w9914420) on CodePen

 

But on more serious note there is a lot of scope for this tool to have a production ready version, just a thought

 

tnxs

 

Bromel

[Sahil]

@bromel Doesn't your last thread contain multiple pens with working scrubber? Just curious if you came across any issues because scrubber in each example work fine for me.

[bromel]

Hi @Sahil

 

Yes you are completely right, but the scrubber works in a slightly different way to the one demonstrated in this example.

 

The audio example works like:

 

tl.progress(audio.currentTime / audio.duration);

 

so the integer can never be anything small than 0;

 

This example works like:

 

t2.progress(x / (volRect.width - knob2Rect.width));

 

But the x value can be a negative integer hence the need for Jack's awesome solution

 

And tnxs again for help, most appreciated