GSAP animation flashing in safari

[Cameron Knight 16 Likes (Newbie)]

Hi ladies and gents.

 

Hoping someone can help me out with the performance of this animation in Safari. I built a site for a friend and it works fine on Chrome, Firefox and Edge but on Safari it flashes towards the end of one of the animations in the timeline. I have no idea why. If anyone could give me some advice on how to fix this and any other tips to improve the performance, i'd really appreciate it 😘 https://theswirlytrain.com

 

Here is a video example of what is happening.

 

// start animation at top of page
function scrollTop() {
  if ('scrollRestoration' in history) {
    history.scrollRestoration = 'manual';
  }
  window.scrollTo(0,0);
}

const tl = gsap.timeline({ defaults: { ease: 'power3.out' }, onStart: scrollTop });

tl.set('article', {autoAlpha: 1});
tl.from('.home .artwork .elementor-widget-container', 3, { scale: 8, autoAlpha: 0, delay: 0.3});
tl.from('.home  .elementor-button, .signup-form, .release-details', 1, {autoAlpha: 0, y: 40, stagger: 0.4, delay: -1});
tl.from('header', 1, {autoAlpha: 0, delay:-0.5});
tl.from('.moving-text', 3, {autoAlpha: 0, scale:1.2, x: 100, delay:-0.5});

 

 

[ZachSaucier 7,152 Likes (Superhero)]

Hey Cameron. Cool site!

 

It's pretty hard to debug on a full site like that when we don't have access to the code. I recommend that you keep stripping parts (first of the page, then for that component) until you figure out which part is causing the issue. If you can post a more minimal version on CodePen or something we might be able to help.

[Cameron Knight 16 Likes (Newbie)]

Hi @ZachSaucier,

 

Thanks so much for the quick reply. I'll do what you suggested and start stripping back a few elements to see what the issue is. Appreciate the feedback. 

[GreenSock 18,597 Likes (Superhero)]

Yeah, @ZachSaucier suggested exactly what I would too (try stripping things back to isolate the issue). I'm curious - was the flashing with the .home element? Kinda looks like you're creating conflicting tweens there with the negative delays and such. You've got TWO tweens trying to control the same property of the same element. That's a logic issue. I'd definitely avoid creating conflicts like that. 

 

Anyway, once you get it isolated, we'd be glad to take a peek. 

[Cameron Knight 16 Likes (Newbie)]

You guys rock @GreenSock. Thanks for your help.

After playing around with the animation and digging through some forums, I found the solution!

I had to add the following CSS to the element that was flickering and it stopped the flickering in Safari 🥳
 

-webkit-transform-style: preserve-3d