Jump to content
GreenSock

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

Use only specific interval of ease function

Recommended Posts

Hi there!

 

Is it possible to apply only specific interval of ease function to my tween. Something like:

TweenMax.to( startPos, 2, endPos );

endPos.ease = Power2.easeInOut.interval(0.25, 0.9);

I don't want skip first 0.25 and last 0.1 progress of my tween.

Link to post
Share on other sites

I read your question a few times but I'm still pretty confused. Are you saying that you want your tween to suddenly jump to where the ease would normally be at 25% of its progress, but at the beginning? And then continue on normally but end where the ease's typical 90% progress value is? So it would never reach its true ending position? 

 

Do you have an example or more details you can share? 

 

A few tips:

  1. You can literally tween the progress of another tween. Like TweenMax.fromTo(otherTween, 2, {progress:0.25}, {progress:0.9})
  2. You can create any ease you can imagine using CustomEase. See http://greensock.com/customease
  • Like 2
Link to post
Share on other sites

I agree with you that my question a little bit unclear. So I will provide an example to show you my case.

 

See the Pen bqWEvq?editors=0010 by kryvonos_v (@kryvonos_v) on CodePen

 

In provided Codepen we have a box and two buttons: "Move" and "Move further". 

 

When I click "Move" button box starts moving to the right {x: 400}. If I click the button "Move further" before previous animation has ended I see bitter transition between animation.

 

So, how can I achieve smooth effect in this case?

Link to post
Share on other sites

When you click the 'move further' button, you're overwriting that 'move' tween and starting a new one. It seems to me like you're trying to update the tween on the fly. If that's the case, I think TweenMax's updateTo() method is what you're looking for:

 

https://greensock.com/docs/#/HTML5/Animation/TweenMax/updateTo/ 

 

If you're going to get complex with things, the thread on additive animation may be of some interest to you as well.

 

https://greensock.com/forums/topic/12573-additive-animation/

 

Our resident wizard Blake has a really nice demo here:

 

See the Pen PPmJpL by osublake (@osublake) on CodePen

 

Hopefully that helps.

 

Happy tweening.

:)

Edited by Dipscom
Amending dead link ;)
  • Like 2
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.

×