Reset gsap timeline problem

[delalegion]

Hi! 

 

I am currently working on slider and i have one problem with it. He working okay until i click very fast buttons to slide next or slide previous. But when i click slowly, when animation goes over, it work perfect, the problem is when animations dont end and it crashed when i spamming buttons. 

I know that i can check if animation is active, running and then change slide but i dont wanna this, because it's not look good, to wait until animation end. I want even when animation going on, i wanna change slide and clear animation and do animation again.

 

Here's a demo: https://codesandbox.io/s/amazing-wiles-31is8?file=/src/App.js

 

So, in short, what I mean: I want fix the bug when i click very fast on buttons and it's crashed. I think i need clear animation every time when i click on buttons and run it again? I am right? But how i can do it? 

Or... for performance it would be better if i will check if animation is currently running and then change slide? 

 

[GreenSock]

It looks like you're making one of the most common mistakes - creating logic issues related to using .from() tweens. It's not a bug with GSAP or anything - it's that .from() tweens use the CURRENT values as the END values. For example, let's say obj.x starts at 0 and then you do gsap.from(obj, {x: 1000}) - it'll of course jump immediately to 1000 and animate to 0 because 0 is the CURRENT value when that tween begins. But now imagine that tween is halfway done (obj.x = 500 assuming a linear ease) and then your user clicks and it runs that same tween logic again - now gsap.from(obj, {x: 1000}) will animate from 1000 to 500 (not 0) because obj.x is 500 when that tween starts. 

 

See the issue? 

 

You just need to be very careful when you use .from() tweens that you understand the logic involved. 

 

Typically in cases like this, it's much better to either use a .fromTo() or just a .to() tween, maybe with a .set() initially. For example, if you want to animate from x: 1000 to x: 0, do: 

gsap.fromTo(obj, {x: 1000}, {x: 0});

Or

gsap.set(obj, {x: 1000});
gsap.to(obj, {x: 0});

Does that clear things up? 

[delalegion]

Thanks for answer! 

 

So, yeah, now i understand it 😮 I would never think about it. I understand it but it still not working, but i think it's not problem with gsap so i don't wanna waste your time but if you wanna u can check this:  https://codesandbox.io/s/nameless-currying-8ehfz?file=/src/App.js

It still crush when i fast clicking on buttons. I know te reason of that but i dont really know how i can fixed it 🤔 

The problem is when end animation going on so slide and "active" class can't change and it crush.

[GreenSock]

Yeah, that definitely looks like a React/logic issue. Unfortunately I don't have time to troubleshoot that for you (maybe @Rodrigo has an idea) but we're happy to answer any GSAP-specific questions. 👍

[Rodrigo]

Hi,

 

I don't have a lot of time to go through all your code but there are a few things that caught my attention. First your set up is a bit convoluted IMHO, but that's more of a personal opinion. Try to break things into small presentational components, for example no need to have all the markup for the buttons in that component. Also the way you're using the classes is a bit outside my comfort zone, again just my two cents on the subject.

 

Regarding the code, at some point the content of your app will be dynamic or it will always be static? If your app will be static, then you can use regular selectors with querySelectorAll otherwise you should use refs.

 

Finally the problem is because at some point when the click events happen too fast the state is updated after a second consecutive click, so at that point the value of currentSlide is bigger than 2, which returns undefined because the array's biggest index is 2, causing all the problems. Maybe you'll have to come up with some logic to prevent click events until the state is fully updated or use a global variable for the counter and update the state according to that.

 

Happy Tweening!!!