Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
jonForum

Diferente Ease mix start end ?

Recommended Posts

hi everybody, how proceed to mix diferente ease at start and end : i cant find doc?
It possible ?

 

Example: Something like thats, assuming the tween compute the half/time in the process ?

 

TweenMax.to(bar, 1, {
  rotation:-Math.PI/2, 
  ease:[Back.easeIn.config(1.2), Bounce.easeOut],
});

or like this ?

TweenMax.to(bar, 1, {
  rotation:-Math.PI/2, 
  ease:{ start:Back.easeIn.config(1.2) , end:Bounce.easeOut },
});

 

or ...

TweenMax.to(bar, 1, {
  rotation:-Math.PI/2, 
  ease:{ '0':Back.easeIn.config(1.2) , '0.5':Bounce.easeOut },
});

 

or... 

TweenMax.to(bar, 1, {
  rotation:-Math.PI/2, 
  easeIn:Back.config(1.2),
  easeOut:Bounce,
});

 

Link to post
Share on other sites

hum thank, but look too complicate to handle simply.
What about this, it should not work?
I would have thought that the timeLine will re-compute at in midway ?

 

		const tt = 1;
        const tl = new TimelineMax()
            tl.to(bar, tt, {rotation:-Math.PI/2, ease: Back.easeIn.config(1.4) },0)
            tl.to(bar, tt/2, {ease: Bounce.easeOut  },tt/2)

 

existe nor more easier ways than your demo ?

Link to post
Share on other sites

ho ok this seem work 

 

        const tl = new TimelineMax()
            tl.to(bar, 1, {rotation:-Math.PI/2, ease: Back.easeIn.config(1.4) },0)
            tl.to(bar, 1, {rotation:-Math.PI/2, ease: Bounce.easeOut  },1/2)

if any more easier suggest?  i take it. :)

 

Link to post
Share on other sites

Glad you got it working, but the blended ease isn't as complicated as it may look in that demo:

 

//just feed in the starting ease and the ending ease (and optionally an ease to do the blending), and it'll return a new Ease that's...blended!
function blendEases(startEase, endEase, blender) {
  blender = blender || Power4.easeInOut;
  return new Ease(function(v) {
    var b = blender.getRatio(v);
    return startEase.getRatio(v) * (1 - b) + endEase.getRatio(v) * b;
  });
}

TweenMax.to("#target", 2, {x:100, ease:blendEases(Back.easeIn.config(1.2), Bounce.easeOut)});

 

I created that "blendEases()" function for you that should make it super simple. 

 

Does that help? 

  • Like 2
  • Thanks 2
Link to post
Share on other sites

yes thanks a lot for your time , i will probably add new polyfill in my project for do this.

  • Like 1
Link to post
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.

×