GSAP animation does not work in FF and Safari.

[wp-helping-hand]

Hello together,
I am in the process of creating a website. On the page there are some animations. In Chrome everything works great but in Firefox and Safari the start and end points of the scroll trigger are shifted very much downwards which causes the animation to run too late.
The site is built with wordpress and the Oxygen Builder.
Anybody have an idea where the problem is?
Link to the page: http://klocke-agentur.de/kunden/doerries/
Thanks for your help.

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

If you're using something like React/Next/Nuxt/Gatsby or some other framework, you may find CodeSandbox easier to use. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[SteveS]

I've used oxygen builder in the past and Firefox is my primary browser so I might be able to help you. That being said I don't see any ScrollTrigger effect occurring on the page you linked in Chrome or Firefox.

[wp-helping-hand]

@SteveS Thank you. Sorry I'm working on the page right now and took ScrollTrigger out for a moment.
Now it's back in.

[SteveS]

@wp-helping-hand
 

I don't think this is a browser issue. Opening the webpage in chrome shows the same issue you are describing, elements animating on screen much later that I would expect.

In my experience, and if I'm wrong hopefully someone will correct me, this can be caused by creating the scrolltrigger before everything on the page has loaded. Actually, I went to check the page again, and it works sometimes so it's almost definitely along those lines. Sometimes weird margins on elements can also have an effect.

It's impossible for me to debug it without seeing your code, and even then anything WP related always runs the risk of some weird page builder artifact getting in the way. But here are some steps you can take to try and pin down the issue:

1. Start a brand new page and slowly bring in one section at a time, making sure each works before bringing in the next.
2. Refresh your scrolltriggers using a timeout that fires several seconds after the page loads / set all GSAP to execute several seconds after page load to see if it really is an issue with the DOM changing
3. Make sure you aren't making one of the common scrolltrigger mistakes

 

If you post your GSAP code we can check for simple mistakes or optimizations, but these kinds of issues are awfully hard to figure out over a forum.

[wp-helping-hand]

Thanks @SteveS for your help.
I have found the problem. It is as you said. ScrollTrigger was loaded before all element in DOM were ready.
I have now set a timeout so that there is enough time.

[SteveS]

I don't recommend using a timeout for production. Make sure you are placing the script right before the closing body tag and wrapping your GSAP in a function that runs after the DOM has loaded.