[IE animate border color bug after using mediaqueris]

Oh thank you so much for your answer.

 

 

Styles defined inside media queries may not be accessible/tweenable.

- so problem number 1 most likely isn't a bug.

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 ?!

[IE animate border color bug after using mediaqueris]

Any solution ?

[IE animate border color bug after using mediaqueris]

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 ?

 

 

 

See the Pen lnkCJ by aminfa (@aminfa) on CodePen

[multiple animations at same time ultra slow in chrome]

Hello again aminfa,

 

Looks like you were missing the addition of the CSSRulePlugin JS script in codepen.. you wil have to add that seperate since TweenMax does not include it:

http://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.1/plugins/CSSRulePlugin.min.js

:

I forked your codepen example and added the URL in the codepen JS panel ..

 

See the Pen HefiF by jonathan (@jonathan) on CodePen

 

Try it now

 

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 ?

 

See the Pen lnkCJ by aminfa (@aminfa) on CodePen

[multiple animations at same time ultra slow in chrome]

here is the code

 

See the Pen lnkCJ by aminfa (@aminfa) on CodePen

 

but javascript doesn't work !

[multiple animations at same time ultra slow in chrome]

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.

[multiple animations at same time ultra slow in chrome]

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.