m4g1c14n

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)

I have made sure that the path in question is never ever drawn above 100% and or below 0%, so it is ALWAYS within the value of 0% ~ 100%. The slow down is really really apparent, just let the codepen above run and see the fps plummet, if you are using a very fast rig, you can decrease interval to execute the animation faster I dont know if the problem exists when I am using the Tweenlite.to() instead, but I can not be using this due to : As you can see the animation in question must be run over an unlimited loop, and the drawSVG can not draw above 100% , such the drawSVG ("95% 105%") will always instead drawSVG("95% 100%") I need to alter the acceleration of the animation based on the position of the mouse, it might even run backward if the acceleration went below 0 (deceleration) I wonder what is the work around for this problem, should I instead be drawing the SVG on my canvas instead? Although I have been ShockinglyGreen member for almost a year now, but I have just started tinkering with GreenSock library just now, I am a complete newbie, any input is warmly welcomed