aminfa

Oh thank you so much for your answer. But the problem is just in IE. So in IE, I can't tween an element at all if i use media queries for that element ?!

Any solution ?

Hi Here is the part of my tween that I have problem with : rule = CSSRulePlugin.getRule("#sctrl table"); //get the rule if (scId==1) {var color="#2a2a2a"} else {var color="#f2f2f2"}; if (scId < currentslide) { TweenMax.to(rule, 1, {cssRule:{borderColor:color},ease:Power2.easeIn}); } and I have this css code : #sctrl table {width: 135px;height: 5px} #sctrl table,tr,td{border:1px solid #f2f2f2;border-collapse:collapse;padding: 0px} @media screen and (min-width: 1358px){ #sctrl {width: 120px;height: 6px;bottom: 25px} #sctrl table {width: 120px;height: 5px} #sctrl td {width: 60px;height: 5px} #sc {width: 60px;height: 6px} } the border color animates fine in chrome but it doesn't work in IE10. the interesting part is if I remove the mediaqueries in the css it will work in IE too. I wonder where is the problem ? the second question is I use multiple tweens at the same time and it's very slow in chrome. I tested in a few computers with chrome and in all of them it was slow. but if I remove this line of animations the speed will be very faster (more than twice): TweenMax.to(rule, 1, {cssRule:{borderColor:color},ease:Power2.easeIn}); what is your solution ? http://codepen.io/aminfa/pen/lnkCJ

Thank you. it works. I replaced the code you edited with my code but it doesn't work correctly.and steel it's slow. Would you mind take a look at it ? http://codepen.io/aminfa/pen/lnkCJ

here is the code http://codepen.io/aminfa/pen/lnkCJ but javascript doesn't work !

Thank you very much. I really appreciate . but when I replaced "left" with "x" as you edited my code , this lines didn't work right : TweenMax.to('#st' + currentslide, 1.3, {force3D:true, x: '-=100%', ease: Power1.easeIn}); TweenMax.to('#slide' + scId, 1.1, {force3D:true, x: '0', ease: Power1.easeInOut}); TweenMax.to('#st' + scId, 1.3, {force3D:true, x: '-=89%', ease: Power1.easeIn,onComplete:defaultslide}); I think it's a kind of css problem but I don't know why. and the speed doesn't change at all. I'm gonna make a codepen demo. Thanks anyway again.

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.