Gsap easing help needed

[Ivan.dzhurov]

Hello,

 

I apologize for not providing a pen, but I hope my explanation will be clear enough.

 

I am animating a moving stripe, which is using a Back.easeOut.config(1.6) easing. However, I want to detect when the overshoot starts as I want it to run an additional animation by that time. My timing is dynamic, so I want to avoid calculating it manually.

 

Is there any sort of event firing when the overshoot starts, or can I detect that somehow? I have tried splitting the animation in two gsaps, but I cannot get it to animate so nicely without a single easing function.

 

Thanks in advance,

Ivan

[TaiwoJazz]

In order for you to get a better and fast response.. It will really be better if you provide a minimal demo.. 

I use react and it's a little bit tedious creating a minimal demo every time I need help but guess what? That process is now part of me.. With the minimal demo, I get solutions quickly. You may think your explanation is detailed enough but trust me, it's only clear to you 😂

If your code is not too complex or it's just a few lines.. Then posting a code snippet would be great as well.. Cheers...

[GreenSock]

There's not a pre-determined way of doing that, no, but you could approximate it like this: 

let ease = gsap.parseEase("back(1.6)"),
	steps = 10000; // precision
for (let i = 0; i < steps; i++) {
	let value = ease(i / steps);
	if (value >= 1) {
		console.log("crossed at", i / steps);
		break;
	}
}

This shows that it shoots past the destination value around a progress value of 0.3847. So you can just multiply that by your duration to find the time.