Mobile problem with horizontal scroll

[allen1997831]

Hello i have a problem with mobile scroll trigger problem, I want to change background as you move to next content section, the content is scroll in horizontal way on mobile.

 

Problem: I see there are 2 triggers point on my first content then messed up the color change points...the other contents seems trigger fine just first content has the problem.

 

can anyone advice me please? the point is change background color when you scroll different content section

 

thank you in advance!  

See the Pen zYQEayO by Dep-it-esedigital (@Dep-it-esedigital) on CodePen

[Rodrigo]

Hi @allen1997831 and welcome to the GSAP Forums!

 

The main issue is this:

window.addEventListener('resize', () => {
  ScrollTrigger.refresh();
  setupScrollTriggers();
});

First, there is no need to call the refresh() method on window resize, ScrollTrigger senses that by itself and debounces the refresh method to prevent wasting resources. Then you're setting up your ScrollTrigger and GSAP instances on every resize event without killing and reverting them, hence the extra markers you're seeing, because you have multiple ScrollTrigger instances that are starting at the same time, one for every resize callback.

 

For this is far better to just use GSAP MatchMedia:

https://gsap.com/docs/v3/GSAP/gsap.matchMedia()

 

Here is a fork of your demo:

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

 

Hopefully this helps.

Happy Tweening!

[allen1997831]

8 hours ago, Rodrigo said:

Hi @allen1997831 and welcome to the GSAP Forums!

 

The main issue is this:

window.addEventListener('resize', () => {
  ScrollTrigger.refresh();
  setupScrollTriggers();
});

First, there is no need to call the refresh() method on window resize, ScrollTrigger senses that by itself and debounces the refresh method to prevent wasting resources. Then you're setting up your ScrollTrigger and GSAP instances on every resize event without killing and reverting them, hence the extra markers you're seeing, because you have multiple ScrollTrigger instances that are starting at the same time, one for every resize callback.

 

For this is far better to just use GSAP MatchMedia:

https://gsap.com/docs/v3/GSAP/gsap.matchMedia()

 

Here is a fork of your demo:

 

 

 

Hopefully this helps.

Happy Tweening!

Thank you so much for your time! this community is amazing.