CODEWITHSUNDEEP
javascriptjquerycssgsap
Trevor Nestman
Trevor Nestman

Reputation: 2526

TweenMax.to() is jumpy/not smooth

I'm trying to make a web-based like slide show and am trying to figure out the best way to transition between slides.
I initially used jQuery Animate(), but found it to be not smooth at all. I came across the GreenSock TweenLite/TweenMax library and have seen improvement.
Unfortunately, things still aren't the smoothest.
This is what I have thus far:

http://codepen.io/FluidOfInsanity/pen/PbJbWm


It runs pretty good in Firefox, but struggles in Chrome quite a bit. It also seems like the bigger the window is, the more jumpy it gets.

Is there something in my code that's causing it to not have smooth transitions? Or am I missing something with the TweenMax implimentation?
Your help is very appreciated.

Update/Answer

Initially my code read as follows:

/* BEFORE UPDATE */
TweenMax.to($('.slide-holder'), speed, { 
            left: "-=" + xTo, 
            top: "-=" + yTo,
            overwrite: "all"
          });

TahirAhmed suggested changing it from left and top to x and y. Now my code looks like this and is much smoother:

/* AFTER UPDATE */
TweenMax.to($('.slide-holder'), speed, { 
            x: "-=" + xTo, 
            y: "-=" + yTo,
            overwrite: "all"
          });

Upvotes: 1

Views: 1561

Answers (2)

Aras
Aras

Reputation: 497

Tahir's answer pretty much covered it but also try adding these codes to your tween:

ease: Power2.easeInOut,
force3D: false,

and as I've seen on almost every article about tweenmax its better practice to use .fromTo()

It is also important that you don't set css transitions to the elements you want to animate, you can just add a .set({transition: " ... "}) to those elements at the end of your tweens

Upvotes: 0

Tahir Ahmed
Tahir Ahmed

Reputation: 5737

When animating, it is recommended to use x and y instead of left and top.

References:

  • Why Moving Elements With Translate() Is Better Than Pos:abs Top/left: Link.
  • High Performance Animations: Link.
  • CSS Triggers: Link.

Upvotes: 3

Related Questions