Hi
I have a slideshow and it's good in all browsers except in chrome the animations are very laggy and slow and the speed is around 5 fps !!
Here is my slider function :
function slide() {
var rule = CSSRulePlugin.getRule("#sctrl table"); //get the rule
if (scId == 1) {var color = "#2a2a2a"}
else {var color="#f2f2f2"};
if (scId < currentslide) {
TweenMax.to("#sc", 0.9, {left:scId * 45, ease:Power1.easeIn});
TweenMax.to('#slide' + currentslide, 0.9, {left:'100%', ease: Power2.easeInOut});
TweenMax.to('#st' + currentslide, 1.2, {left: '100%', ease: Power2.easeIn});
TweenMax.to('#slide' + scId, 0.9, {left:'0', ease: Power2.easeInOut});
TweenMax.to('#st' + scId, 1.2, {left: '11%', ease: Power2.easeIn,onComplete:defaultslide});
TweenMax.to(rule, 1, {cssRule:{borderColor:color}, ease: Power2.easeIn});
TweenMax.to('#sc', 1, {backgroundColor: color, ease: Power2.easeIn});
}
else {
TweenMax.to("#sc", 1.1, {left:scId * 45, ease:Power1.easeIn});
TweenMax.to('#slide' + currentslide, 1.1, {left: '-100%', ease: Power1.easeInOut});
TweenMax.to('#st' + currentslide, 1.3, {left: '-=100%', ease: Power1.easeIn});
TweenMax.to('#slide' + scId, 1.1, {left: '0', ease: Power1.easeInOut});
TweenMax.to('#st' + scId, 1.3, {left: '-=89%', ease: Power1.easeIn,onComplete:defaultslide});
TweenMax.to(rule, 1, {cssRule:{borderColor:color}, ease: Power2.easeIn});
TweenMax.to('#sc', 1, {backgroundColor: color, ease: Power2.easeIn});
}
}
the #slide is photos and the #st is the slide's text on the photos and #sc is a slide control for switching beetween slides.
I recall this function every 6 seconds (except the first time that is 4 seconds) with this code :
TweenMax.delayedCall(4, slideauto);
function slideauto () {
var slider = new TimelineLite();
if (scId==2){
scId=-1;
}
scId++;
slide();
TweenMax.delayedCall(6, slideauto);
}
at first I thought it might be because of the large photos but it didn't make any change when I replaced the background photos with background color.
then I removed this line of my code and the speed a little improved ( like 15 fps) but it's still too slow.
TweenMax.to(rule, 1, {cssRule:{borderColor:color}, ease: Power2.easeIn});
I want to know how can I optimize my code to run faster and smoother in every browser.
Thank you.