Jump to content
Search Community

Reverse custom ease

Emilek1337 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello, is there a way to reverse the custom ease I created? I have an ease and I want to ease the out transition exactly the other way around.

So for example it comes with a fast-slow ease and I want it to go out with slow-fast ease, with the exact same values but swapped.

Is there a way to do it? 

Link to comment
Share on other sites

Hi @Emilek1337. Welcome to the forums. 

 

It sounds like you're talking about a simple yoyo. You can set repeat:1 and yoyo:true on a TweenMax or TimelineMax instance to get that effect. Or just reverse() the animation anytime. If you still need help, a codepen would be super helpful so we can just tweak things in your context. 

 

Happy tweening!

Link to comment
Share on other sites

10 minutes ago, GreenSock said:

Hi @Emilek1337. Welcome to the forums. 

 

It sounds like you're talking about a simple yoyo. You can set repeat:1 and yoyo:true on a TweenMax or TimelineMax instance to get that effect. Or just reverse() the animation anytime. If you still need help, a codepen would be super helpful so we can just tweak things in your context. 

 

Happy tweening!

Thanks for the reply. I didn't explain my problem the right way, sorry for that. I can't use customEase on codepen, but I created this: 

See the Pen KLEwrJ?editors=1111 by vountish (@vountish) on CodePen

 to show the concept I'm talking about(animation is not working, I'm just showing the concept of the custom ease).

Moving something by 100% to the right with a customEase, then moving it 100% the right again(200%) with the customEase I used but reversed(so like easeIn for 100% easeOut for 200%, but using my customEase).

Link to comment
Share on other sites

Just so you know, you can use any of the bonus plugins on codepen for free. We created special trial versions which are all listed here: 

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

 

I whipped together a helper function that'll simply invert an ease for you. Just feed in the ease and it'll spit back a new one that's inverted: 

See the Pen rgROxY?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Here's the function:

//feed in an ease and get back a new inverted version of it.
function invertEase(ease) {
  if (typeof(ease) === "string") {
    ease = CustomEase.get(ease);
  }
  return function(p) {
    return 1 - ease.getRatio(1 - p);
  };
}

 

Does that help? 

  • Like 1
Link to comment
Share on other sites

22 hours ago, GreenSock said:

Just so you know, you can use any of the bonus plugins on codepen for free. We created special trial versions which are all listed here: 

 

 

 

I whipped together a helper function that'll simply invert an ease for you. Just feed in the ease and it'll spit back a new one that's inverted: 

 

 

 

Here's the function:


//feed in an ease and get back a new inverted version of it.
function invertEase(ease) {
  if (typeof(ease) === "string") {
    ease = CustomEase.get(ease);
  }
  return function(p) {
    return 1 - ease.getRatio(1 - p);
  };
}

 

Does that help? 

Yes, thank you very much!

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.
×
×
  • Create New...