Firefox Animations not working properly

Hey Guys!

Just finished my work on a clients Website. Site works perfectly on chrome and Safari. Even Edge!
But it is something different with firefox.

My read only is attached. The lyrics Text and gallery have a fade in animation on page load. They appear from opacity:0 and a blur to opacity:100 and blur:0. But nothing is happening on firefox. They just appear without any transition. How can I fix this? I´m not using any legacy interactions here. Only simple 0-100% opacity fade on page load. This drives me crazy!!!

On the other hand, talking about the landing page (home) the dragable Mask appears last. So the background fades in and then is overlapped bei the Mask overlay. This doesn´t make sense, because the Overlay has no transition at all and should be there all the time! I fixed this by giving the background transition a short delay, but this is not best practice!

Please help asap!!


Here is my site Read-Only: Webflow - Marie Riedel

I’m experiencing the same issues with my website and would love to know if you’ve found a solution.
When testing in Chrome and Safari the interactions and page load animations are mostly pretty smooth, but on Firefox it’s extremely laggy, with images just appearing after a delay, rather than fading in nicely after they have loaded. Hover interactions seems painfully slow too compared to in other browsers.
Here’s my testing link for my site in progress: https://gillian-moran-portfolio-website.webflow.io/

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.