Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Android Chrome 6 lags when multiple element is tweening

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 () {

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


Share this post

Link to post
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

Share this post

Link to post
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

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.