Jump to content
Search Community

Weird glitch

friendlygiraffe test
Moderator Tag

Go to solution Solved by Reksa Andhika,

Recommended Posts

This is odd, I get this strange bug:

 

incorrect_300px_0loops_25fps_normal_no_dither.gif.9060ae7e5775f4a22c343932299cbd2a.gif

 

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

Correct_300px_0loops_25fps_normal_no_dither.gif.422919c9493b58fd7978e3f2a737f6b0.gif

 

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

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

  • Like 1
Link to comment
Share on other sites

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? 

  • Thanks 1
Link to comment
Share on other sites

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

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

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. 

  • Like 3
Link to comment
Share on other sites

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

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

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

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. 

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...