Search code examples
javascriptjquerycssgsap

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"
          });

Solution

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