Animations buggy in safari

[Lennart Bellemann]

Hi, 

I'm using gsap to create a menu animation, and a faq style accordion. 
Everthing works perfectly on chrome, however things get weird in safari ( as usual..)

1. My menu can't even be clicked - other gsap animtions work fine, it's just the menu. 
I'm absolutely clueless here, no idea why this doesn't work. I used the same animation in a different project where it works. 

2. The faq style accordion works, however the two lines somehow go very far apart and then snap back together. For some reason this only happens on the first click, when i replay the animation by opening and closing the faq accordion, it works fine - just the first time is buggy. 

I tried fixing this with will-change: transform, and the parent flex to will-change: flex-gap,  i set a max height for the parent div of the two lines, no luck so far. 

to me it looks like its re calculating the position of the lines and the new height because accordion opened at the same time, but i have no idea how to prevent this. 



here's my webflow read only link https://preview.webflow.com/preview/p102?utm_medium=preview_link&utm_source=designer&utm_content=p102&preview=2eb2afd9827dbe2503f9148839dad918&pageId=6634d062c40d0d42037fb5d7&locale=en&workflow=preview

here's the live site: https://p102.webflow.io/wie-ich-arbeite


any help is appreciated a lot, thanks!

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

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

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

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

[mvaneijgen]

Hi @Lennart Bellemann welcome to the forum!

 

There is a lot going on your site and sadly we can't debug live websites, there is just no way to modify the code or even see it. All my animation always start in Codepen, so that I can just focus on the basics and don't have to worry about my framework or platform in this case trowing errors. Then when implementing it in my live website I have a working demo ready to debug any issues that come up, by doing this you have a known working version and will save you a lot of headache while debugging. 

 

I had a quick look at your site and you load both GSAP and ScrollTrigger twice, next to that there are a lot of other plugins you load, lenis, split type, swiper.js, ect. My advise start by removing large chunks of code to see if the issue disappears then slowing add things back in until the issue comes back, that way you can pin point what the issue is. 

 

If you still need help after this, please provide a minimal demo demonstrating the issue, please don't include your whole project just the parts that are causing your issue. 

 

Hope it helps and happy tweening!