Ease timing question

[kristoffer 7 Likes (Newbie)]

Hi
 

Is it possible to specify an absolute time for the ease itself? For instance if I want the ease for only the first 1 second independent on the total duration of the tween? 

 

Thanks,

Kristoffer

 

[OSUblake 18,494 Likes (Superhero)]

You can use split-ease for that.

https://split-ease.js.org/

 

[kristoffer 7 Likes (Newbie)]

1 hour ago, OSUblake said:

You can use split-ease for that.

https://split-ease.js.org/

 

Ahh perfect. That's what I was looking for. Thank you.

[kristoffer 7 Likes (Newbie)]

... if I could only figure out how to use it 😧. I tried to use what was mentioned in this topic :

More specifically:

gsap.to(box, 2, { y: 400, ease: SplitEase(0.7, 0.2)});

const mySplitEase = new Ease(t => SplitEase(t, 0.7, 0.2, 2));
gsap.to(box, 2, { y: 400, ease: mySplitEase}); 

 

But it's not working. Any ideas? Maybe it's a GSAP 3.x compatibility issue? (I used this script tag  <script src="https://unpkg.com/split-ease" charset="utf-8"></script>)

 

I sent an email to the author @lunelson@gmail.com as well. 

 

Thanks,

Kristoffer

[ZachSaucier 7,152 Likes (Superhero)]

Hey kristoffer. So long as you're passing in an ease function (takes a number between 0 and 1 and returns a number between 0 and 1) it should work. For example (though in reality GSAP already has a "bounce" ease so you shouldn't need the below in practice):

See the Pen RwWzXXB by GreenSock (@GreenSock) on CodePen

 

Can you please make a minimal demo of the issue?

[kristoffer 7 Likes (Newbie)]

Made a simple CodePen, and now it seems to work of course. Not really sure what I did different this time 🤷‍♂️.

 

See the Pen KKdjjjG by krispen (@krispen) on CodePen

 

Thanks,

Kristoffer