Navigator compatibilty issues ?

[Philippe-Gllrt]

Hello everyone,

 

Unfortunately, I won't be able to provide a CodePen for this, as I don't really know where the problem is localized. However, here is a video of the unexpected behavior: https://www.loom.com/share/725a8e4dd343467b9526d7bbf93a7a40?sid=d6f1335e-fd20-4c9c-ba28-cbe6e0be5dc6

 

Here is the link to my site: https://client-first-template-71e-b2b3dae23c7a1.webflow.io/

 

So basically, I have a timeline running perfectly on most browsers and machines, except one person using Opera on Windows and another using Chrome on Windows. (I also use Chrome and don't experience any problems.)

The problem is with a 'from' type tween, in a timeline. The animation is played, and then the scaleY is set again to the value set in the 'from' (0). Actually, I read about some similar issues with Chromium browsers. I wonder if any of you people have at least an idea of a direction I may search in?

 

I'm a bit lost with this one. Thanks in advance.

See the Pen BaXQJBR by PhilippeGoulliart (@PhilippeGoulliart) on CodePen.

[Rodrigo]

Hi Philippe and sorry about the issues.

 

I just tested on Chrome and Firefox on Ubuntu 20 & 22 (don't have a windows machine I'm afraid) and your site is working OK for me. Unfortunately there isn't a lot we can do to test and try possible solutions on a live staging/production site, that's why we ask for minimal demos that isolate the problem.

 

Since you mention a from instance, maybe you have two different animations targeting the same element and properties and that could be causing an issue, you can check if immediateRender helps somehow:

https://gsap.com/docs/v3/GSAP/gsap.from()/#immediateRender

 

Other than that I'm afraid that there is not much else that comes to mind TBH 🤷‍♂️, I wish I had a better answer for you 😞

 

Hopefully this helps

[Philippe-Gllrt]

Hello Rodrigo,

Thanks for your answer. I built a demo, just about this precise behavior. The thing is, as everything works well on my side, I am not sure the codepen is so relevant. Here is the link, I also edited the post to add it :

See the Pen BaXQJBR by PhilippeGoulliart (@PhilippeGoulliart) on CodePen.

This element, here the one with the class "frame" is only targeted once. I think more of a problem on compatibilty or something similar, as it works well for most people. I will give a shot to ImmediateRender, but honnestly I don't think it's a gsap issue there.

thanks in advance to everyone that might contribute
ps: i'm about to post this portfolio on linkedIn, every comment is more that welcome hahaha 😁

[Rodrigo]

Hey Phillippe,

 

Yeah unfortunately the demo doesn't replicate the issue we can see in the Loom recording. Maybe try to see if you have some CSS Transition in the elements that are causing the issue, using CSS transitions with GSAP is a bad combination to say the least:

https://gsap.com/resources/mistakes#using-css-transitions-and-gsap-on-the-same-properties

 

Finally I really like your portfolio, is fun, intuitive and moves fast for a scroll/event-based one that doesn't have a scroll bar on it, great job! Is always encouraging seeing users get the most out of GSAP 💚

 

Happy Tweening!