Jump to content


Gsap easing help needed

Recommended Posts



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,


Link to comment
Share on other sites

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

  • Like 3
Link to comment
Share on other sites

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);

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. 

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