fd_alistair Posted February 12, 2020 Share Posted February 12, 2020 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 More sharing options...
alexandrosb Posted February 12, 2020 Share Posted February 12, 2020 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. 2 Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 12, 2020 Share Posted February 12, 2020 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! 3 Link to comment Share on other sites More sharing options...
fd_alistair Posted February 12, 2020 Author Share Posted February 12, 2020 Works a treat! many thanks Link to comment Share on other sites More sharing options...
fd_alistair Posted April 15, 2020 Author Share Posted April 15, 2020 ....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 More sharing options...
ZachSaucier Posted April 15, 2020 Share Posted April 15, 2020 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(). 1 Link to comment Share on other sites More sharing options...
fd_alistair Posted April 15, 2020 Author Share Posted April 15, 2020 Thanks! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now