Weird easing behavoir

Recommended Posts

Hey, I just started using GSAP and already ran into an issue. Basically not only is the 'ease' parameter not working at all, no matter what value i set. Also the default ease is somewhat weird. Simple example: i want to move a div from 0/0 to 100/100. I simply call

TweenLite.to($('#settings'), 1, { x:100, y:100});

what happens is that for about the first half of the way the div moves rather slow, but then suddenly accelerates and for the rest of the distance moves a lot faster.

Again, using something like "ease: Power3.easeInOut" doesnt do anything for me. Also I didnt set any default easing.

Share this post

Link to post
Share on other sites

Hi @hemmoleg :)


Welcome to the forum.


I see you're using TweenLite so perhaps you didn't load the EasePack? Another thing to check is if you've put the ease in the correct place in your tween vars? Here's a simple pen with a few different eases. 



My pen loads TweenMax which also loads the EasePack, but if you're loading TweenLite only, you need to load the EasePack too.


TweenMax loads:

  • TweenLite
  • TweenMax
  • TimelineLite
  • TimelineMax
  • CSSPlugin
  • AttrPlugin
  • RoundPropsPlugin
  • DirectionalRotationPlugin
  • BezierPlugin
  • EasePack

If you have other questions, a demo is most helpful in getting you the best answers.


Hopefully that helps. Happy tweening.


  • Like 6

Share this post

Link to post
Share on other sites

Just to clarify TweenLite includes the Power eases, so you don't need EasePack for those. 


The default ease is Power1.easeOut so even if you don't define an ease your animation should slow down at the end and not speed up. 


Like PointC said a demo would really help us clear this up. Definitely sounds like something strange is going on. 

  • Like 4

Share this post

Link to post
Share on other sites

Thanks for the clarification @Carl. I always seem to forget that some eases are included with TweenLite. Probably because I always use TweenMax. 

  • Like 1

Share this post

Link to post
Share on other sites

Sorry for being late, i upgraded my pc and it didnt go all as planed.

Anyway, i found the issue. Since i am testing TweenMax in an already ongoing project i already had a transition property defined on the div wich got in the way of tweening.  I removed it and now it works as it should. Thx for all you answers though :)

  • Like 1

Share this post

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.