Weird easing behavoir

[hemmoleg]

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.

[PointC]

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. 

 

See the Pen rpyKxx by PointC (@PointC) on CodePen

 

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.

[Carl]

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. 

[PointC]

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

[hemmoleg]

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