Jump to content
Search Community

Android Chrome 6 lags when multiple element is tweening

lilsizzo test
Moderator Tag

Recommended Posts

I ve tested a script like this but its not smooth for android 6 for chrome browser. For ios devices seem quite smooth. Ive also tried using x and y rather than left and top but still the same. Any idea on either changing the code or improve something on the android?

 

var particleTimer = setInterval(function () {

					$(".particle").each(function(i,e){
						var obj = $(this)
						var speedHorz = obj.attr("data-speedHorz")
						var life = obj.attr("data-life")
						var direction = obj.attr("data-direction")
						var speedUp = obj.attr("data-speedUp")
						var size = obj.attr("data-size")
						var time = obj.attr("data-time")
						var left = parseInt(obj.css("left"))
						var top = parseInt(obj.css("top"))


						// console.log("left"+left)


						time = time - life;
					    left = left - (speedHorz * direction);
					    top = top - speedUp;
					    speedUp = Math.min(size, speedUp - 1);
					    // spinVal = spinVal + spinSpeed;
					    
					    // console.log("spinVal"+spinVal)
					    // console.log(time)
					    // console.log('sad')
					    TweenLite.set(obj, {
						  	height: obj.attr("data-size")+'px',
						  
						  	width: obj.attr("data-size")+'px',
						  	left: left+'px',
						  	top: top+'px'
						  });




					})
				    
				  }, 1000 / 60);	


 

Link to comment
Share on other sites

Hi lilsizzo and welcome to the GreenSock forums. I saw your cross-post on StackOverflow and was in the process of answering it. 

 

The biggest performance hit is because you're using DOM elements. If you were to use <canvas> for your particles instead, it would perform much better (you could get hundreds or thousands of particles without much of a performance risk if you wanted to).

 

However, you can make this DOM animation much more performant than it is currently. The biggest thing to change is to use transforms instead of top and left because top/left causes the browser to reflow. In GSAP you can do that by affecting the x and y properties. You should also use transform's scale instead of affecting width/height if you end up changing the scale during the animation for the same reason. In GSAP you should also set the rotation instead of the actual transform itself (it generates the proper transform for you). I also recommend using GSAP's .set() method instead of jQuery's .css(). For even more performance, use GSAP's .quickSetter() method.

 

Using GSAP's .delayedCall instead of setInterval will also be more reliable. Even better, use gsap.ticker() and call all of the update functions from within that! 

 

Altogether you get this demo.

See the Pen povRaWB?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Other optimizations could be done, such as reusing the same particles and not creating/destroying the old ones, but the performance is about at its cap in terms of DOM animation. Like I said at the beginning, this sort of thing is perfect for <canvas>.

  • Like 1
Link to comment
Share on other sites

1 hour ago, ZachSaucier said:

Altogether you get this demo.

 

Something ain't right with that demo. It looks really choppy compared to the original one. Should probably use a ticker and do everything inside a single function call.

 

Here's a really old demo  that I converted to work with v3. Click on the faucet to start it.

See the Pen 143da1ae969f3caf26f4fb3276b24586 by osublake (@osublake) on CodePen

 

Taken from this thread. 

 

 

 

  • 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.
×
×
  • Create New...