Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Cameron Knight

GSAP animation flashing in safari

Recommended Posts

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});

 

 

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
Share on other sites

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. 

  • Like 2

Share this post


Link to post
Share on other sites

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

 

  • Like 2

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×