Jump to content
Search Community

Stop TweenMax queue

fd_alistair test
Moderator Tag

Recommended Posts

Hi there, I'm new to Greensock but managed to create a quick code pen.

 

I've created an animation which goes from 500px to 0px over 10 seconds.

 

I've created a button which adds 100px to the width on click, however if you click the button multiple times it looks like it queues the animation and takes too long to restart the animation.

 

Any help would be appreciated.

See the Pen KKpdZoo by fuzzyduck (@fuzzyduck) on CodePen

Link to comment
Share on other sites

max-width is set to 500 but you are setting and animating the width. When the width, after multiple clicks, is 1000 for example you only see the first 500 (set by max-width) but you are animating down from 1000, hence the delay.

 

either use only width in both code and css, or limit the addition of width to 500 max.

  • Like 2
Link to comment
Share on other sites

Hey fd_alistair and welcome to the GreenSock forums!

 

It sounds like you want the duration to be based on the distance that the line needs to go instead of a set duration?

 

If so, you can do that by using the width as part of the duration calculation like so:

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

 

I added some comments to make it more understandable. I also upgraded you to GSAP 3 because the version of GSAP you were using is really old and GSAP 3 is way better!

  • Like 3
Link to comment
Share on other sites

  • 2 months later...

....just following up on this - I'm struggling to find a way to stop the animation - is it possible to create a 'stop' button which pauses & cancels the animation where it is?

 

 

 

 

On 2/12/2020 at 4:36 PM, ZachSaucier said:

Hey fd_alistair and welcome to the GreenSock forums!

 

It sounds like you want the duration to be based on the distance that the line needs to go instead of a set duration?

 

If so, you can do that by using the width as part of the duration calculation like so:

 

 

 

I added some comments to make it more understandable. I also upgraded you to GSAP 3 because the version of GSAP you were using is really old and GSAP 3 is way better!

 

Link to comment
Share on other sites

20 minutes ago, fd_alistair said:

I'm struggling to find a way to stop the animation - is it possible to create a 'stop' button which pauses & cancels the animation where it is?

Sure, just save a reference to the tween in the shrink function. For example here's a play/pause:

See the Pen eYpJBJz?editors=1000 by GreenSock (@GreenSock) on CodePen

 

To cancel/kill the animation you could change it to anim.kill(). 

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