Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Victor Work

Synchronize .progress() with mousedown

Recommended Posts

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

Link to comment
Share on other sites

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. 

 

 

  • Like 2
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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

 

  • Like 2
Link to comment
Share on other sites

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?

  • Like 1
Link to comment
Share on other sites

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?

 

Link to comment
Share on other sites

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?

  • Like 3
Link to comment
Share on other sites

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

 

  • Like 6
Link to comment
Share on other sites

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.

 

 

  • 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.
×