m4g1c14n

Thanks for the information, I fixed it by adding style will-change: transform; into the element that will be transformed, before even with 10 iteration, my macbook pro 16 m1 reached 30% cpu and for 30 iteration reached 50% cpu with this style applied, I can run 50 iteration animation and the CPU hover around 7-8% 😃 Check the new pen https://codepen.io/m4g1c14n/pen/QWBgJEw

I forked this pen from GSAP Infinite Scrolling Text, and just simply generate a 10 more random row, and when I render them, I can see that my CPU is really2 high Is there anything that I should know about, this animation should be quite light right //Change this to 30 to see the CPU is crying :( const total_text = 10; I left one row for you guys to inspect, later I will generate all Scrolling Text programmatically This is not the final form of the animation, I am planning to make a 3D Steps comprised of these text, and use them to fully close a section and then fully reveal another section ( sort of a full page transition ), and if this kind of animation is taxing the CPU this much, I might not be able to continue with my design plan Please help

Thanks a lot for the explanation, @Carl @OSUblake So in the end I just make sure that tl.progress() == 1 before I invalidate , and then I can invalidate and then reverse them

Here is the simple CodePen to illustrate https://codepen.io/m4g1c14n/pen/QWjOYbV If you click restart over and over again ( slowly ), everything works , and the random value is refreshed, but if you trigger Pause , you can never restart it anymore ( except if you remove the invalidate() ) Also if you clicked on restart button over and over again in quick succession , it will treat as if target opacity no longer 1 and x no longer 0 lets say the opacity in the beginning = 1 and x = 0 if in the middle of animation you clicked restart ( with invalidate ), it will treat as if the target opacity is current opacity and x is current X ( which is definitely not opacity=1 and not X=0, because we are in the middle of animation ) So my take is, if we are doing invalidate, it will not only recalculate the RANDOM, but also the target current property >.< so the question is how to invalidate ( which will refresh the random ), but still obey the initial state ( not current state where we may be in the middle of tween )?

So lets say I have an animation with random values, it animate properly and then I wish to restart the animation at will , lets say when I clicked a button, but I want to restart the animation with Refreshed Random value I have tried setting the repeatRefresh to true, but apparently it is not working :( Is there anyway of doing this easily? Thanks a lot

Okay nailed it.... after the help from everyone, i have finally find the culprit The culprit is the Transition style Check the Codepen http://codepen.io/m4g1c14n/pen/ZGgEwO , you can see that it is not animating correctly, BUT if you remove the transition style, it works perfectly Thanks a lot everyone, I would not notice this without all of your help PS : Is this considered a bug??

And by the way , it seems it is not the Anchor tag fault, neither it is the inline-block or the relative Because the Facebook, Google, twitter Icon are all Anchor tag, but they animate PERFECTLY, while the Award Icon are all not animating correctly

Everyone, thanks a lot for your help. @Osublake, at your pen, did you notice the lag on the first 3 buttons? that is the "Jasa Pembuatan Website" , "Jasa SEO Bergaransi" and "Tentang Kami" and in your pen, did you also notice that the awards icon is not animating as it should be? (The animation should be EXACTLY the same the first animation for logo, that is From(scale:0%, autoAlpha:0)... apparently in here, not even the scale animation is not shown, but also the autoAlpha is choppy I am trying to make sense of all this, so what caused the problem? The Anchor tag? The Inline-Block (This can not be, because there are many div that is inline-block and position relative, and it works, eg: The Facebook, Google, Twitter button) I want to understand the problem, so that perhaps later in the future, I can avoid this kind of thing from ever happening again Again thanks a lot

I first noticed this at https://www.jasa-website-murah.com/Promo/Jasa-Pembuatan-Website.html , when you wait the animation to finish and scroll down to find the form, you can see everything is animated smoothly, EXCEPT the "Kirim" button, it is extremely choppy, it is really really visible.... I shrug it away and thought "perhaps the greensock animation can not properly animate the Form Input button?" But now, I am developing the https://www.ikt.co.id , I am animating the Left side panel, and saw huge amount of choppiness, so I create the CodePen, you can really2 see the choppiness is started at the "Map Button" (very slightly), the "Awards Icon" and the "Arsip + Mobile Version Button" (very pronounced) What goes wrong? This case is extremely urgent for me, because I need to bring the animation live by monday (if possible), please help

Damn... i have just found the solution myself... I must store the tweenFromTo reference, and pause the reference instead .... Sorry , can this post be deleted now? ^^;

I can not pause an animation that is executed by tweenFromTo Please help

Ahhhhh, that makes a lot of sense... It works flawlessly now.... Yup2, I should have used the Tween.set instead of Timeline.set , because the Timeline.set added the additional "Keyframe" (in Flash IDE Language) even thought the keyframe run only 1 frame (no duration) ... of course that would need to use a hefty amount of memory if you add that many keyframe per second for a while Thanks a lot......

anybody?

PS : I forgot to thank you , for sharing the stats library and also the new EXTREMELY handy method of TweenMax.delayedCall xD By the way, to be fair although I am new with the GreenSock JS , I used to develop a Flash Website using GreenSock library AS3 https://www.ikt.co.id It is really good to see, that greensock never failed to amaze the **** out of me right now as it was 5 years+ ago

Hi Carl, Thank you for your reply Apparently , you are using a very fast rig, and the Stats Script is capped at 60fps, is it possible for you uncap the stats detection to see your maximum fps, you will definitely see the drop (Let it run for lets say 1 minute ~ 2 minutes, you should see it, because it is really2 apparent) I am using Intel Q6600 , quite old I know, but my max fps is around 59~60fps, and yes I did see a significant decrease in fps, after I let the script runs for a while I have tested it on Intel Q6600, Windows 8 PC Firefox 38.0.5 Chrome 43.0.2357 See the Attached GraduallySlower.png IE 10.0.9200 See the Attached GraduallySlower2.png On IE the slow down is much faster I have also tested in on my Moto E First Generation Chrome 43.0.2357 And yes I do still see the Gradual Slowdown in FPS (starting at 25fps, after 30 seconds ~ 1 minute, the fps stars to slow down to around 18fps)