lilsizzo Posted December 18, 2019 Share Posted December 18, 2019 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 More sharing options...
ZachSaucier Posted December 18, 2019 Share Posted December 18, 2019 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>. 1 Link to comment Share on other sites More sharing options...
OSUblake Posted December 18, 2019 Share Posted December 18, 2019 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. 2 Link to comment Share on other sites More sharing options...
OSUblake Posted December 18, 2019 Share Posted December 18, 2019 5 minutes ago, OSUblake said: Should probably use a ticker and do everything inside a single function call. And use quickSetter. https://greensock.com/docs/v3/GSAP/gsap.quickSetter() 3 Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 18, 2019 Share Posted December 18, 2019 Updated my demo to use ticker and quickSetter. Link to comment Share on other sites More sharing options...
OSUblake Posted December 18, 2019 Share Posted December 18, 2019 1000x better. ? Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now