Jump to content
GreenSock

aminfa

multiple animations at same time ultra slow in chrome

Recommended Posts

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.post-31217-0-61391400-1410275192_thumb.png

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.

Link to comment
Share on other sites

Hello aminfa, and welcome to the GreenSock Forum!

 

You could try a number of things:

TweenMax.lagSmoothing(0);

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, {force3D:true, x:scId * 45, ease:Power1.easeIn});
		TweenMax.to('#slide' + currentslide, 0.9, {force3D:true, x:'100%', ease: Power2.easeInOut});
		TweenMax.to('#st' + currentslide, 1.2, {force3D:true, x: '100%', ease: Power2.easeIn});
		TweenMax.to('#slide' + scId, 0.9, {force3D:true, x:'0', ease: Power2.easeInOut});
		TweenMax.to('#st' + scId, 1.2, {force3D:true, x: '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, {force3D:true, x:scId * 45, ease:Power1.easeIn});
		TweenMax.to('#slide' + currentslide, 1.1, {force3D:true, x: '-100%', ease: Power1.easeInOut});
		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});
		TweenMax.to(rule, 1, {cssRule:{borderColor:color}, ease: Power2.easeIn});
		TweenMax.to('#sc', 1, {backgroundColor: color, ease: Power2.easeIn});
	}

}

:

If this doesn't help.. could you please provide a limted codepen example that shows the behavior you are seeing in the browser.

 

Here is a nice video by GreenSock on how to create a codepen demo example.

 

Hope this helps! :)

  • Like 3
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Hi,

 

In  order to work with percentages, the best approach is use xPercent and yPercent, just pass the number (positive or negative) without the symbol and you're done:

TweenMax.to('#st' + currentslide, 1.3, {force3D:true, xPercent: -100, ease: Power1.easeIn});
		TweenMax.to('#slide' + scId, 1.1, {force3D:true, xPercent: 0, ease: Power1.easeInOut});
		TweenMax.to('#st' + scId, 1.3, {force3D:true, xPercent: -89, ease: Power1.easeIn,onComplete:defaultslide});

Check the following link and codepen samples to learn more about it:

 

http://greensock.com/gsap-1-13-1

  • Like 3
Link to comment
Share on other sites

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 :)

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Hi,

 

There are a few things worth mentioning.

 

First in your codepen the slide function is triggered manually, there's no delayedCall() method in your code that creates an automatic slide, not even after clicking. Then after doing it manually again there's no delayedCall() that keeps the slide animations going.

 

Second, I checked  this on Chrome 37, on windows 7, 64 bits, and the slide animation seems quite ok to me. I looked in dev tools and there's only two rendering events that take longer than 16 milliseconds (one 21ms and the other 40ms) that's not enough to cause an animation lag due to rendering. Perhaps there's a memory leak in your current installation of Chrome or your real code is far more complex than the codepen you created.

 

Anyway with the code you're already providing is going to be very hard to solve this issue, so I'd urge you to double check your codepen in order to make it as close as your real code as possible (without bloating the code) and check if Chrome is eating too many resources on your machine.

 

Rodrigo.

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×