friendlygiraffe Posted December 6, 2022 Share Posted December 6, 2022 This is odd, I get this strange bug: var mainTL = gsap.timeline(); mainTL.from(".text2", {duration: 0.5, x:"+=80px", autoAlpha:0, ease:"power4.out"}, 0.5) .from(".phone", {duration: 1, scale:0.7, x:"+=250px", y:"+=400px", ease:"power2.inOut"}, 0.5); I discovered it only happens when both the items start at 0.5. So If I change the code for one of them to 0.6 it's fine: mainTL.from(".text2", {duration: 0.5, x:"+=80px", autoAlpha:0, ease:"power4.out"}, 0.5) .from(".phone", {duration: 1, scale:0.7, x:"+=250px", y:"+=400px", ease:"power2.inOut"}, 0.6); I've created gifs, as the codepen doesn't produce errors. Any tips appreciated See the Pen KKebjdN by friendlygiraffe (@friendlygiraffe) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted December 6, 2022 Share Posted December 6, 2022 That is really strange! I'm going to ping @GreenSock to see if there is something weird going on or we are just missing something. I've modified you're pen a whole bunch to see if there wasn't any funny business going on with a CSS property or a 0 duration .to() tweens (You can use .set() for that, just FYI). I've also loaded another version of GSAP, but that wasn't it. And changed your relative transforms to just the specific number, because in this case that wouldn't make a difference (I don't know if it does in your real project). The bug keeps happening , but not always! See the Pen VwdqJoL?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen I've also rewrote your timeline to use a delay on the timeline instead of the tween, and both tweens running at the same time, using the same label (this is how I personally would write it) and with this there is no bug, so if you're in a hurry you could take this approach. Hope it helps and happy tweening! See the Pen mdKaZYP?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen 1 Link to comment Share on other sites More sharing options...
friendlygiraffe Posted December 6, 2022 Author Share Posted December 6, 2022 (edited) Thanks for this! Unfortunately I won't get away with using delay for this project The only other way I can maybe fix it is by reverting to the old V2 TweenMax syntax ... will try that now edit: Yup! v2 works now.... Edited December 6, 2022 by friendlygiraffe Link to comment Share on other sites More sharing options...
GreenSock Posted December 7, 2022 Share Posted December 7, 2022 That's not a bug and it has nothing to do with GSAP or what version you're using. The browser parses the DOM and then executes JavaScript. This identical to the "flash of unstyled content" issue. The browser initially displays the normal state of the element and then the JavaScript kicks in and executes, and since you're using gsap.from() tweens, it jumps to those values and animates backwards. The reason you're only seeing the issue sometimes is just because it all depends on how fast the browser is at parsing things and executing the JS. Sometimes there are other background processes or a JS file may take a little longer to load or something. Sometimes it's super fast and your eye doesn't pick up on the "unstyled" content. Typically the best way to handle this is to set the initial state of maybe a container element to be visibility: hidden in your CSS, and then the first line of your JS can be gsap.set(".container", {autoAlpha: 1}). You don't really need to do this with every individual element if you just do it to a container. Does that clear things up? 1 Link to comment Share on other sites More sharing options...
mvaneijgen Posted December 7, 2022 Share Posted December 7, 2022 5 hours ago, GreenSock said: Typically the best way to handle this is to set the initial state of maybe a container element to be visibility: hidden in your CSS, and then the first line of your JS can be gsap.set(".container", {autoAlpha: 1}). @GreenSock I thought I'd tested that and I was sure it did. It was also part of the original pen. I've forked my pen reinstated the line of CSS that sets visibility: hidden on and it still sometimes happens. See my forked pen below. See the Pen YzvBYJN by mvaneijgen (@mvaneijgen) on CodePen 9 hours ago, friendlygiraffe said: edit: Yup! v2 works now.... @friendlygiraffe do you have a demo of that version? Link to comment Share on other sites More sharing options...
friendlygiraffe Posted December 7, 2022 Author Share Posted December 7, 2022 5 hours ago, GreenSock said: Typically the best way to handle this is to set the initial state of maybe a container element to be visibility: hidden in your CSS, and then the first line of your JS can be gsap.set(".container", {autoAlpha: 1}). You don't really need to do this with every individual element if you just do it to a container. Does that clear things up? Thanks Jack, that's how I've set up the codepen container: hidden then gsap sets to 1 Link to comment Share on other sites More sharing options...
friendlygiraffe Posted December 7, 2022 Author Share Posted December 7, 2022 44 minutes ago, mvaneijgen said: @friendlygiraffe do you have a demo of that version? Sure here's a version using v2 See the Pen qBKgxJV by friendlygiraffe (@friendlygiraffe) on CodePen Link to comment Share on other sites More sharing options...
friendlygiraffe Posted December 7, 2022 Author Share Posted December 7, 2022 (edited) Here is a side-by-side comparison. GSAP 3 on the right Edited December 7, 2022 by friendlygiraffe added zips Link to comment Share on other sites More sharing options...
friendlygiraffe Posted December 7, 2022 Author Share Posted December 7, 2022 For reference: GSAP3: GSAP2: See the Pen qBKgxJV by friendlygiraffe (@friendlygiraffe) on CodePen If you keep refreshing on GSAP 3 you will see the glitch, whereas GSAP 2 will not Link to comment Share on other sites More sharing options...
Solution Reksa Andhika Posted December 7, 2022 Solution Share Posted December 7, 2022 Hey, I think I have same issue, after I updating the GSAP >3.11.0 version, so currently I stay on GSAP 3.10.4 version to avoid random flash/glitch that ruins smooth experience animation Link to comment Share on other sites More sharing options...
GreenSock Posted December 7, 2022 Share Posted December 7, 2022 It's very difficult for me to reproduce, but I believe this was already fixed in the upcoming release - can you please confirm that using this (beta) version resolves things?: https://assets.codepen.io/16327/gsap-latest-beta.min.js You can also try setting lazy: false on your tween(s) to see if that has any effect. I suspect the latest beta resolves things, though. 3 Link to comment Share on other sites More sharing options...
Reksa Andhika Posted December 8, 2022 Share Posted December 8, 2022 22 hours ago, GreenSock said: It's very difficult for me to reproduce, but I believe this was already fixed in the upcoming release - can you please confirm that using this (beta) version resolves things?: https://assets.codepen.io/16327/gsap-latest-beta.min.js You can also try setting lazy: false on your tween(s) to see if that has any effect. I suspect the latest beta resolves things, though. @GreenSock Sorry can't help to test the beta (because I have no idea to test it on ES6 project with import method). But I can confirm set lazy: false to my tweens make the issue solved, but I'm afraid about the performance for disable this to all my tweens. If you confident the beta solved this issue, please make it live ❤ I would happy to update my gsap version for my production ready project. Link to comment Share on other sites More sharing options...
GreenSock Posted December 8, 2022 Share Posted December 8, 2022 You can download this .tgz file, drop it into your project directory, and run "npm install ./gsap-beta.tgz" in the terminal: https://greensock.com/temp/gsap-beta.tgz (That file will only be valid for the next 2 days) Then you'll be able to do normal imports in your project. You shouldn't need to worry about setting lazy: false - you'd only notice a difference if you're doing massive quantities of gsap.from() or gsap.fromTo() tweens simultaneously (and it'd only affect the first tick anyway). Link to comment Share on other sites More sharing options...
Reksa Andhika Posted December 8, 2022 Share Posted December 8, 2022 Okay will test it and let you know about it. Well that also scare me to use lazy: false, because most of my website using PJAX, so the transition animation and entering page will affected and lagging (but maybe I can add delay on enter page to let gsap do the job first, but ofc fast load need to be sacrifice). Link to comment Share on other sites More sharing options...
GreenSock Posted December 9, 2022 Share Posted December 9, 2022 6 hours ago, Reksa Andhika said: Well that also scare me to use lazy: false, because most of my website using PJAX, so the transition animation and entering page will affected and lagging (but maybe I can add delay on enter page to let gsap do the job first, but ofc fast load need to be sacrifice). I think you might be misunderstanding what lazy: true does. It has absolutely nothing to do with how things are loaded. It is solely about avoiding a very particular scenario called layout thrashing where values are read and written back and forth sequentially rather than batched. Seriously, I'd be shocked if you noticed any real-world difference unless you are literally creating hundreds or thousands of .from() or .fromTo() tweens at exactly the same moment. It's a very rare scenario. 2 Link to comment Share on other sites More sharing options...
friendlygiraffe Posted December 9, 2022 Author Share Posted December 9, 2022 In case anyone else needs a google-hosted version, as I did. The next previous version I could find was this one: <script src="https://s0.2mdn.net/ads/studio/cached_libs/gsap_3.8.0_min.js"></script> Link to comment Share on other sites More sharing options...
Reksa Andhika Posted December 9, 2022 Share Posted December 9, 2022 Hey Jack @GreenSock I can confirm beta is solved the issue, but I'm only do simple test, like trying to reload browser continuously but it is have difference than previous release and it looks great! 2 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