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.
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"
});
When animating, it is recommended to use x
and y
instead of left
and top
.
References: