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

 

Share this post


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 ?

Share this post


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

 

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×