gsap.from() fires twice only in mobile

[Aitor]

As you can see in this screen recording, the fade effect is triggered twice (and only on mobile devices).

 

 

I have been searching for the cause of this problem for several days. I know that it is not correct to ask for help on an online site, without isolating the problem in a codePen, but I have isolated the functionality in a CodePen and it works correctly there. For this reason, the codePens I have made are useless. Hopefully someone will recognize this problem.

 

Anyway, here they are. One has the same HTML content of the online page (without CSS):

 

See the Pen wvReWNE?editors=1111 by aitormendez (@aitormendez) on CodePen

 

The other is made with clean elements. Both work correctly. They do not present the problem:

 

See the Pen yLGXVXz by aitormendez (@aitormendez) on CodePen

 

 

The site can be viewed online here:

 

https://nmiai.e451.net/team/

 

Almost all pages have the same problem. The JS code is this:

 

const fades = document.querySelectorAll('.fade');

fades.forEach(function (fade) {
  gsap.from(fade, {
    scrollTrigger: {
      trigger: fade,
      toggleActions: 'restart none restart none',
      markers: false,
    },
    y: 50,
    opacity: 0,
    duration: 2,
    ease: 'power4.out',
  });
});

 

https://codepen.io/

[GSAP Helper]

Sorry to hear about the trouble. It's pretty much impossible for us to troubleshoot blind - we need a minimal demo that clearly illustrates the issue. It sounds like there must be something else causing the problem in your production site, especially if you can't reproduce the issue in CodePen/Stackblitz. 

 

Are you using React? If so, make sure you're doing proper cleanup. gsap.context() is your new best friend - it makes it super easy. See

 

 

Also make sure you don't have any CSS transitions that are messing with things on those elements you're trying to animate. It looks like you might be using a 3rd party CSS library and maybe that's automatically applying styles that are messing you up. 🤷‍♂️

 

My guess is that it's either a 3rd party library screwing with things or you're accidentally creating multiple conflicting tweens/ScrollTriggers on the same elements. 

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

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

 

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

[Aitor]

I have fixed the problem by changing:

 

toggleActions: 'restart none restart none',

by:

 

toggleActions: 'play reverse play reverse',

 

I've been playing with the ScrollTrigger options and have gotten a setting that doesn't reproduce the issue. The cause remains unknown to me and it makes no sense that the bug only appears on mobile and not on desktop. It worked fine on desktop even with mobile viewing enabled.

 

I just got it right shooting in the dark.

[GreenSock]

That makes me a bit nervous, @Aitor. I don't think that's actually a solution. It sure sounds like maybe you accidentally created multiple/conflicting tweens/ScrollTriggers on the same element(s)? Super hard to tell without a minimal demo. Or maybe what you're running into is the refresh() that happens on mobile when the screen resizes due to the address bar showing/hiding. I wonder if ignoring that would help, like: 

ScrollTrigger.config({ 
  ignoreMobileResize: true
});

🤷‍♂️

[Aitor]

On 9/14/2023 at 10:58 PM, GreenSock said:

That makes me a bit nervous, @Aitor. I don't think that's actually a solution. It sure sounds like maybe you accidentally created multiple/conflicting tweens/ScrollTriggers on the same element(s)?

 

Thank you so much for the insight on the issue! I've tested the ignoreMobileResize workaround in local an it doesn't work. Thanks for trying.

 

In my previous tests I disabled all page animations except fades, including header animations. Only with the fades active, the problem persists. I've been thinking about this problem and testing for days until I've hit a dead end. I can't think of any more options to try.

[GreenSock]

I'm sure there's a reasonable explanation and there's something in your project that's causing the issue, but without a minimal demo that clearly illustrates the problem, we can't effectively diagnose what's going on. 

 

Are you using React or any other 3rd party framework? Are you absolutely positive you're not double-creating things? 

[Aitor]

14 hours ago, GreenSock said:

I'm sure there's a reasonable explanation and there's something in your project that's causing the issue, but without a minimal demo that clearly illustrates the problem, we can't effectively diagnose what's going on. 

 

Are you using React or any other 3rd party framework? Are you absolutely positive you're not double-creating things? 

 

I'm pretty sure but I'll do a new check just in case.

 

No React nor frameworks. Just vanilla JS.