Jump to content
Search Community

GSAP animation flashing in safari

Cameron Knight test
Moderator Tag

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

 

 

Link to comment
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
Link to comment
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
Link to comment
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.
×
×
  • Create New...