Jump to content
Search Community

Use only specific interval of ease function

kryvons_v 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

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 comment
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 comment
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 comment
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 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...