Using more that one scrollTrigger issue

[UncoloureColors]

Hello all!

I'm using scrollTrigger for two different animations. One for horizontal scroll and another one for SplitType.
The problem is that the first scrollTrigger start and end is affecting the scrollTrigger type animation.

What am I doing wrong here? Does it need to somehow be separated?

 

	const container = document.querySelector('.container-services');
	const sections = gsap.utils.toArray('.section-services');
	if(window.innerWidth > 767) {
		gsap.to(sections, {
		x: () => -1 * (container.scrollWidth - window.innerWidth),
		ease: 'none',
		scrollTrigger: {
			trigger: '.container-services',
			pin: true,
			pinSpacing: true,
			scrub: true,
			start: 'center center',
			end: () => '+=' + (container.scrollWidth - window.innerWidth),
			markers: true
			//invalidateOnRefresh: true // invalidate and recalcalculate functional values on resize
			}
		});
	}

		const text = new SplitType('.reveal-type', { types: 'chars'});
		const chars = text.chars;
	
		gsap.from(chars, {
			scrollTrigger: {
				trigger: '.reveal-type',
				start: 'center center',
				end: 'top 28%',
				scrub: true,
				markers: false
			},
				opacity: 0.2,
				stagger: 0.1
			});

 

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

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

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

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

[UncoloureColors]

I have a minimal demo here but it works fine there..
On my page, if I comment the first scrollTrigger, the second one works fine.

See the Pen pomBYzN by tiago-ascen-o (@tiago-ascen-o) on CodePen

[Cassie]

That makes it quite tricky to help you, can you work out what the difference is between the minimal demo and your live site?

[UncoloureColors]

Hello Cassie.
The only difference is that the horizontal scroll is on a different page than the split text. 
Like I said in my previous comment, if I comment the first scrollTrigger, the split works just fine.

Could the 'document.addEventListener('DOMContentLoaded', function(event)' have anything to do?

I'm using Wordpress Elementor. 

[Cassie]

In your demo the end position of the ScrollTrigger doing the text was before the start trigger.

I fixed that for you, Maybe that was the issue?

See the Pen RwmmGdZ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Quote

The only difference is that the horizontal scroll is on a different page than the split text. 

I don't see how they would interfere with each other if they're on different pages. It's really hard for us to help if you can't replicate the issue somewhere where we can see though.

[UncoloureColors]

26 minutes ago, Cassie said:

In your demo the end position of the ScrollTrigger doing the text was before the start trigger.

I fixed that for you, Maybe that was the issue?
 

 

 

I don't see how they would interfere with each other if they're on different pages. It's really hard for us to help if you can't replicate the issue somewhere where we can see though.

No, unfortunately it still doesn't work. Only my commenting the first scrollTrigger..
If it works fine on codepen, it probably is some Elementor thing, no?

[Cassie]

You said they're on different pages? Are you running all this JS on each page? Maybe that's it?

 

Like this?

See the Pen VwOOmEd?editors=0010 by GreenSock (@GreenSock) on CodePen

If so, you'll need to check whether elements actually exist before running JS - checking in your console for errors is a very useful debugging step.

See the Pen pommNQg?editors=0010 by GreenSock (@GreenSock) on CodePen

[UncoloureColors]

You are amazing, Cassie.

That's exactly that, I'm using a single js file.

I did added a console.log to check if the 'text' and it didn't log anything. But didn't occurred to me that it was stuck because container didn't exist.

Sorry for these dumb questions, new to dev and learning each day!!

Thank you so much!

[Cassie]

No worries at all. 

 

Learn a little about debugging with chrome dev tools, seeing errors in the console will make your life easier. 

 

https://developer.chrome.com/docs/devtools/console

Here are the errors on your broken demo - so it's telling you that the element .container-mvp hasn't been found, and because of that you can't read the scrollWidth