ScrollTrigger - trigger all elements on the page for text animation

[soma]

Hi!

I work on a function that should start the text animation when the trigger element is in viewport, but I would like to make it reusable. I hope I think right about these problem, just can't solve it. 

I would like to use data attributes to set trigger elements for SrcollTrigger. But with the following code, the first trigger will trigger all the texts on the page and play at the same time.

I have a TextSplitter so the .title-split .char are the splitted characters.

I should find all the data-txt-wrapper elements, then start the text animation when the data-trigger element step into the viewport.

Is it possible somehow? 

Thanks a lot!

    // Timeline
    let tl = gsap.timeline({
      scrollTrigger: {
        trigger: triggerElement,
        start: "top 30%"
      }
    });
    tl.from(listTxt, {
      ...
    });
  });
}

 

[akapowl]

 

Hello @soma

That probably is because you are feeding the NodeList you stored in your triggerElement variable as the trigger-element into each of your ScrollTriggers - the NodeList is not a single element, so when you do that it will probably always only just refer to that first element in that NodeList and take that as the trigger in every case, which would result in the behaviour you described. So I would say this is more of a logic problem you are having, not really related to GSAP.

 

Instead you'll probably want to get that one specific element that you need as the trigger in every specific case of the each-loop. I don't know how you have things set up with regard to your html markup, so I can't really give you any solid advice on that unless you add a minimal demo of some sorts, but if the trigger is a parent of your data-txt-wrapper, in jQuery you'll want to use $(this).parent(selector) or maybe $(this).closest(selector) and if it is a child, use $(this).find(selector) siumilar to what you did for the listTxt

 

Maybe this will help already - if it doesn't, please add a minimal demo that makes it easier to help.

 

[soma]

11 minutes ago, akapowl said:

 

Hello @soma

That probably is because you are feeding the NodeList you stored in your triggerElement variable as the trigger-element into each of your ScrollTriggers - the NodeList is not a single element, so when you do that it will probably always only just refer to that first element in that NodeList and take that as the trigger in every case, which would result in the behaviour you described. So I would say this is more of a logic problem you are having, not really related to GSAP.

 

Instead you'll probably want to get that one specific element that you need as the trigger in every specific case of the each-loop. I don't know how you have things set up with regard to your html markup, so I can't really give you any solid advice on that unless you add a minimal demo of some sorts, but if the trigger is a parent of your data-txt-wrapper, in jQuery you'll want to use $(this).parent(selector) or maybe $(this).closest(selector) and if it is a child, use $(this).find(selector) siumilar to what you did for the listTxt

 

Maybe this will help already - if it doesn't, please add a minimal demo that makes it easier to help.

 

Hi!
Thanks! This info solved my problem! Now it works well.