Delay issue in Safari and Firefox but it smooth in Chrome

[Tezah Zulueta]

I created a interactive graph using GSAP but for some reason it doesn't play well in all browser, is it possible to run a different GSAP code in different browser?

See the Pen dyoQPdw by tezahzulueta-the-looper (@tezahzulueta-the-looper) on CodePen

[Tezah Zulueta]

Hi,

 

I created interactive graph using GSAP but for some reason when I check it in Safari and Firefox there's been a delay in morphing of the graph. Please see codepen. Hope you can help me. Thank you!

[Shrug ¯\_(ツ)_/¯]

Hi @Tezah Zulueta and welcome to the GreenSock forums.

 

Sure you can execute GSAP code based upon browser, the same as any other instance of doing so through browser detection. But I think we instead need to get to the bottom of why your graph is perceivably not performing well in those browsers.

 

I see you've made another thread, for future reference its best to contain the issue within a singualr thread. 😉

[Shrug ¯\_(ツ)_/¯]

Hi @Tezah Zulueta again welcome to the GreenSock forums.

 

I saw your other thread, thanks for providing the Codepen in this thread. That always helps with troubleshooting especially when you can dwindle it down to only the essentials of the potential problem so staff does not need to sort through irrelevant code, please keep that in mind in the future.

• What Operating System are you on?
• What exactly is the issue you are seeing?

I tried with the latest Firefox on OS X are you talking about when you press the button and the graph lines fan out but the graph data seems delay behind. I do see that between Chrome and Firefox. Or are you speaking of something else?

 

As stated in your other thread staff will certainly want to get to the bottom of any perceivable issues across browsers.

[Tezah Zulueta]

Hi @Shrug ¯\_(ツ)_/¯, I put the code in codepen, I can't figure out why it doesn't work smoothly in all browser I'm just a newbie in GSAP 

[Tezah Zulueta]

Hi @Shrug ¯\_(ツ)_/¯, I'm working on Macbook Pro 16 inches, it happens when you click the button and the graph expanding. there's a huge delay with lines, dots and graph. It works perfectly with Chrome but not in Safari and Firefox. 

[Shrug ¯\_(ツ)_/¯]

I went ahead and merged your two topics (sorry I didn't originally) since this discussion pertains to the same question/issue. So we can help you get to the the bottom of what may be causing this delay across browsers.

[Tezah Zulueta]

Hi @Shrug ¯\_(ツ)_/¯, yes sorry I didn't attach the codepen earlier and new on creating topics here. Thank you. I've change a couple of codes earlier it help fix the delay with Safari and Firefox but now Chrome gets buggy. Here's the code I change

 

tlLinesDotsMaster

.add("play-all")
.to(
".all-starts-here", {
autoAlpha: 0,
display: "none",
duration: 0.5,
ease: "ease"
},
"play-all"
)
.to(
"#graph-narrow", {
duration: 0.7,
morphSVG: "#graph-wide"
},
"play-all"
)
.add(tlDots, "play-all")
.add(tlLines, "play-all", 0);

 

[Shrug ¯\_(ツ)_/¯]

1 hour ago, Tezah Zulueta said:

I've change a couple of codes earlier it help fix the delay with Safari and Firefox but now Chrome gets buggy.

 

I may have caught that before you made further changes (I think) and the result remained the same for me as it was originally.

 

It's best to fork your Codepen with any changes so others (and you) can progressively see the changes and follow along. Also please try removing all unrelated HTML/CSS/JS to get it down to the least common denominator showing the issue as talked about below.

 

 

This way its easier for you and others to troubleshoot without sifting through all the unrelated items.

[ZachSaucier]

Hey Tezah and welcome! There's a lot of code in your demo. Can you try to cut out all of the parts that aren't directly related to the bug that you're seeing as Shrug asked?