Can I use TweenMax.staggerfrom() inside a scrollTrigger?

[nicolaseielll]

So I have my split text animation in the website hero which runs on mounted but my client now wants the same animation to all of the h2 headings as well and that would require me to somehow use this same animation inside scrolltrigger so the animations would run when the heading appears in the window. Is  this possible to do?

 

Here's my animation in the mounted hook:

How do I apply it in scrollTrigger?

 

var SplitText = this.$SplitText

var heading = new SplitText('.splitext', {type: 'words, chars', position: 'relative'})

 TweenMax.staggerFrom(heading.chars, 1, {opacity: 0, rotation: 4, y: 50, ease:Back.easeOut}, 0.03)

[Cassie]

Heya Nicolas!

 

Thanks for being part of club GreenSock.

 

First up, you're using an old version here - so you'll need to update to at least v3.3 to use ScrollTrigger.

 

Then it's as easy as this...
 

let headings = gsap.utils.toArray('.splittext');
                                  
headings.forEach((heading) => {
 let splitHeading = new SplitText(heading, {type: 'chars', position: 'relative'})
 
 gsap.from(splithHading.chars,{
   opacity: 0, 
   rotation: 4, 
   y: 50, 
   ease: 'back.out',
   duration: 1,
   stagger: 0.03,
   scrollTrigger: heading, // start the animation when the heading enters the viewport (once)
 })
})

documentation here if you need to adjust the trigger points or tweak the parameters.

https://greensock.com/docs/v3/Plugins/ScrollTrigger

[nicolaseielll]

Thanks a lot!! This was just what I was looking for.