How to use splitText text reveal animation with scrollSmoother?

[nicolaseielll]

My text reveal animation works perfectly fine without scrollSmoother but after I implement it to the code, the animated headings wont appear at all. How do I use this with scrollSmoother?

 

Here's the code that works without scrollSmoother:

let headings = this.$gsap.utils.toArray('.split-text');

var SplitText = this.$SplitText

 

headings.forEach((heading) => {

let splitHeading = new SplitText(heading, {type: 'chars'})

 

this.$gsap.from(splitHeading.chars, {

opacity: 0,

rotation: 4,

y: 50,

ease: 'back.out',

duration: 1,

stagger: 0.03,

scrollTrigger: heading

})

})

[nicolaseielll]

I got it working by wrapping that code to a setTimeout of 100 milliseconds