Jump to content
Search Community

Change easing on demand

LukasLt 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

I have a simple jQuery code used to simulate scrolling:

 

$(window).mousewheel(function(event, delta, deltaX, deltaY) {
    if (deltaY < 0) 
        nextLabel = Animation.getLabelAfter();
    else 
        nextLabel = Animation.getLabelBefore();


    if (nextLabel) 
        Animation.tweenTo(nextLabel);
});

Despite not having any acceleration (yet), it works pretty well. 

 

The problem is that I would like to use easeOut easing between tweens. It looks very nice when scrolling down, but on scroll up it ends up acting like easeIn easing.

 

My question is wherever it is possible to change easing after time line was started to be used?

 

Even if it would require looping trough some internal animations and their properties and changing one by one (I would rather not to do so if there is any better way).

 

 

P.s. I'm setting easing though:

TweenLite.defaultEase = Expo.easeOut;

 

Link to comment
Share on other sites

I found a workaround by getting into easing function manually. 

 

First of all create some global variable like 

window.DIRECTION = 1;

Later when you want to change easing direction just update easing to 

window.DIRECTION = 0; 

Next, find the source code for that particular easing. Note TweenMax has easing embeded, so please be aware not to start pulling you hair when changes to easePack is ignored :)

 

 

Since I used Expo.easeOut, i located the code and changed it to the following:

//Expo
_wrap("Expo",
   _create("ExpoOut", function(p) {
      if(window.DIRECTION)
         return 1 - Math.pow(2, -10 * p);
      else 
         return Math.pow(2, 10 * (p - 1)) - 0.001;
}),
  _create("ExpoIn", function(p) {
     return Math.pow(2, 10 * (p - 1)) - 0.001;
}),
   _create("ExpoInOut", function(p) {
      return ((p *= 2) < 1) ? 0.5 * Math.pow(2, 10 * (p - 1)) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
})
);

That's it. If you want, you can make tooging between many easings with just a few lines of code, even when animation is running (be aware it might flicker the screen).

 

On larger projects better create new easing method just to make sure any other dev wont get crashes if your global variable is not set.

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