GSAP animation flashing in Safari when using onLeave function

[sandy120]

Hi All,

I have a problem with GSAP ScrollTrigger onLeave function. First, I want the GSAP animation play only one time when scroll down, and not to replay animation when scroll back up. So I use onLeave function to disable the animation play again, and refresh ScrollTrigger to reset it. It works fine on Chrome, but on Safari and Safari Mobile(iOS) it flashes towards the end of  each one of the animations in the timeline. I have no idea how to fix it on safari. If anyone could give me some advice on how to fix this and any other tips to improve the performance, i'd really appreciate.
(※And I find out that when the animations timeline group amount is more, the flashing problem is more serious. )
This is my demo codepen：

See the Pen NWEoPrK by joanna_0705 (@joanna_0705) on CodePen

[GreenSock]

Hi @sandy120

 

If you'd like some help, please make sure you provide a minimal demo that isolates only the issue you're having in as simple a way as possible. It's quite a lot to ask for people to decipher 550+ lines of JS code.

 

A few comments: 

1. I noticed you're manually doing window.matchMedia() queries and conditionally creating animations accordingly. I'd strongly recommend using gsap.matchMedia() - it is so much easier and does cleanup/reverting automatically.
2. You're running some expensive logic in your onLeave - you're disabling a pinned ScrollTrigger which will resize the window and then you're calling a ScrollTrigger.refresh() which will cause all of the ScrollTriggers on the page to recalculate after temporarily scrolling the page back up to the very top and undoing any pinning (returning the page to its native state). 
3. Have you tried removing anticipatePin? And by the way, that's supposed to be a  number, not a boolean. 
4. You've got ease: Power1.easeIn on a ScrollTrigger which isn't even a recognized property (you can't add an ease to a ScrollTrigger, but you can to the animation it's controlling). And that's the old syntax anyway - it should be ease: "power1.in"
5. You shouldn't need once: true if you're already disabling it inside your onLeave anyway. It's redundant. 
6. Safari handles zIndex rendering differently than all other browsers (totally unrelated to GSAP), so I'd recommend looking at that and making sure that's not the culprit. 
7. You've got scrub: 1 on several of your tweens, but that's not a valid tweenable value. I assume you meant to put that in a ScrollTrigger somewhere? I saw the same problem with another tween where you had start: "bottom 80%",  end: "+=400" as if those were tweening values (but clearly you meant for those to be in a ScrollTrigger somewhere). 

I hope that helps. 

[sandy120]

Hi @GreenSock,
Thanks for the quickly reply, I'll research these tips. Hope can resolved on safari flashing problem.

[sandy120]

Hi @GreenSock,

I,ve already revise my code according to your advice. But on Safari and Safari Mobile it still flashes towards the end of each one of the animations in the timeline.

Is it possible to achieve all these conditions by GSAP ScrollTrigger：
1. I want the GSAP animation play only one time when scroll down, and not to replay animation when scroll back up. So I used ScrollTrigger.refresh() in onLeave function.
2. I need the pin: true setting to achieve the animation effect I want.
3. No flashing bug on Safari and Safari Mobile.

This is my codepen, I've simplify my JS code as much as possible：

See the Pen GRwLxYW by joanna_0705 (@joanna_0705) on CodePen

Please tell me how to improve the code, thanks again.

[Rodrigo]

Hi,

 

12 hours ago, sandy120 said:

1. I want the GSAP animation play only one time when scroll down, and not to replay animation when scroll back up. So I used ScrollTrigger.refresh() in onLeave function.
2. I need the pin: true setting to achieve the animation effect I want.

What particular section is the one where you're trying to achieve this behaviour? I see this in your code that achieves exactly that:

ScrollTrigger.create({
  trigger: e,
  pin: true,
  pinSpacing: true,
  ease: "power1.in",
  start: "top top",
  end: "+=1500",
  scrub: 1,
  animation: tl,
  onLeave: function (self) {
    self.scroll(self.start);
    self.disable();
    self.animation.progress(1);
    ScrollTrigger.refresh();
  },
});

You have several placement errors in your code:

gsap.from(tar2, {
  scrollTrigger: {
    trigger: e,
    toggleActions: "play pause resume reset",
  },
  yPercent: 15,
  ease: "power1.in",
  opacity: 0,
  scrub: 1, // This goes in ScrollTrigger config object
  start: "20% bottom", // This goes in ScrollTrigger config object
  end: "+=300", // This goes in ScrollTrigger config object
});

That is just one example, there are a lot of those in your code, that you can see in your console.

 

Hopefully this helps. 

Happy Tweening!

[sandy120]

Hi @Rodrigo,

Anyway, thanks for your helps.
I adapted my JS code, but it still has Safari flashing bug...
I can't resolved the problem at last.

[Rodrigo]

Hi,

 

Yeah, I can see a jump happening on iOS on the first section mainly even with normalizeScroll(). On android it doesn't happen so it seems to be one of those issues with iOS Safari that doesn't get solved (see at the end of this link)

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()

 

One alternative could be to use Observer in order to keep the section there and then disable the observer instance in order to allow normal scrolling, then you don't have to enable it back, just omit the onEnterBack callback in the ScrollTrigger config:

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

 

Hopefully this helps,

Happy Tweening!