Synchronize .progress() with mousedown

[Victor Work]

I would like to know the best way to synchronize tween progress with the hold button.

Problem: if I quickly release the button and then hold it does not synchronize with time (start var), so the Tween ends before the setTimeout

See the Pen dKvgxM by Noturnoo (@Noturnoo) on CodePen

[Carl]

Hi

 

I'm not quite following what you mean by "synchronize tween progress with the hold button". Also I don't see a setTimeOut

 

Can you explain the exact user interactions and the desired results?

 

You can use a tween as a timer. If your tween has a duration of 2 seconds you can restart it on each press. When you release the mouse you can see if its progress() is less than 1 or you can check its time().

 

Again, I'm not exactly sure what you are trying to do, and I'm confused by the tween reversing. 

 

 

[Victor Work]

Let's see if I can be clearer: I need to synchronize the timeline with the mouseDown event. I want to define that the tween has the progress to the event, something similar with that
 

button.on('mousedown', function() {
	tween.progress(+=.1)
})

Could I be clearer?

[Carl]

I think it would be best if we avoided the technical terms (timeline, progress, setTimeOut). Just imagine I'm your client and I know nothing about Javascript or GSAP and you are explaining to me how this feature works.

 

What do I see when the mouse is pressed on the button? What do I see when the mouse is released. What happens if I hold the mouse too long or not long enough? That sort of stuff.

 

The point here is if you can describe how this is supposed to work, we can advise on the best implementation. I'm confident it won't be too hard. 

[Carl]

if you just want the animation to progress 1/10th on each press as your last code snippet suggested, you could do

 

See the Pen vrxMvM?editors=0010 by GreenSock (@GreenSock) on CodePen

 

[Victor Work]

hahaha, I'm using the translator and maybe this is not helping.

 

Let's step by step:
I need it when the customer presses the button to start revealing the bar, and when you release the bar, do the reverse, and when it reaches the end of the animation it pulls an event.

Similar to my pen, the only problem is that the progress of the animation is not running by holding the button down but rather at the initial click of the event. And this is not letting the animation time align with the button press.

see this site (https://www.2017.aristidebenoist.com/), it has a button trigger similar to what I want to do.

Did you get it?

[Victor Work]

9 minutes ago, Carl said:

Se você quer que a animação progrida de 1/10 em cada vez que o último snippet de código sugerido, você poderia fazer

 

See the Pen vrxMvM?editors=0010 by GreenSock (@GreenSock) on CodePen

 

 

but this is continuous, similar to what happens with OnUpdate.

Can you increase the progress without releasing the button?

 

[PointC]

I'm a bit confused here too. Isn't that what your demo is doing? On mousedown the tween plays and on mouseup it reverses? If you hold it long enough, the progress will hit 1 and trigger the onComplete.  Once it completes, your handler can fire the new animation (or whatever it does) and remove the listener?

 

Or am I missing something?

[Sahil]

Ya I am in same boat. Why would you bother with with recording time etc? Unless I am missing something, you are taking really wrong route to achieve this.

 

See the Pen YvVGbg?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

And if you really want to use something like setTimeout then you can instead use delayedCall and update it on mousedown.

 

See the Pen ZRKBLr?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

[Carl]

Hi Noturnoo,

 

Thanks for the clarification. Much better!

 

If I understand correctly, Sahil's demos should offer great solutions.

 

If not, please let us know what needs to be different.

 

 

[Victor Work]

Great Sahil, that was just it.
Thank you @Carl,  @PointC and @Sahil

 

Love Us ❤️