Scroll Trigger Conflict-Title does not animate below 2nd Scroll trigger element

[888]

Hello, hope you can help.

 

I have the following problem when using scroll trigger an cannot find what the problem is:

 

This is "Title" animations scrollTriggrer:

 

scrollTrigger: {
      trigger: text,
      start: 'center 80%',
      end: 'center 30%',
      scrub: true,
    }

 

 

Thhis one is a Slideshow animation ScrollTrigger;

 

  scrollTrigger: {
      trigger: container,
      start: () => 'top top',
      end: () => `+=${slides[0].clientWidth * slides.length}`,
      pin: true,
      pinSpacing: true,
      scrub: 1,
    }

 

 

All the section titles which are before the slideshow section are working perfectly;

Section Titles  which are afdter the slideshow Section are static no response.

 

Am I doing something wrong in the scrollTrigger code?

 

 

 

 

 

[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. ✅

[888]

Hi, thank you for your fast response;

 

I have created the demo on code pen as requested,

 

You can see on the demo that Titles 1 and 2 are animating correctly; then after the slide show, titles 3 and 4 are not animating

 

here is the link to the demo 

See the Pen GgRXEyN by BlazoN (@BlazoN) on CodePen.

 

 

[mvaneijgen]

Hi @888 welcome to the forum!

 

It is best to create the ScrollTrigger in order they appear on the page. If you can't do this you'll have to use the refreshPriority property inside ScrollTrigger to define in what order they are appear on the page.  See the docs for more info https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#refreshPriority

 

As an example I've given all your ScrollTrigger triggers a data-prio="{number}" in your HTML and then read them when creating the ScrollTrigger, this way you can tell ScrollTrigger what the order is of all your ScrollTrigger and thus adjust the trigger accordingly. How and what the best way its to implement this into your project is up to you. 

 

Hope it helps and happy tweening! 

 

See the Pen xbxapLE?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen.

[888]

Thank you for your help 👍

[GreenSock]

For the record, you could also try just calling ScrollTrigger.sort() after you've created all your ScrollTriggers - it'll try its best to discern the refreshPriority based on positioning automatically. The tip @mvaneijgen gave you about setting refreshPriority explicitly is the most bulletproof way to do it, but ScrollTrigger.sort() is adequate in most cases, especially with the updated algorithm we implemented in the most recent version.