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.

Share this post


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

Share this post


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?

Share this post


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

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.

×