Stagger Animation Not Being Applied By ScrollTrigger

[pauljohnknight]

Hi,

 

I have a word made of spans where I would like them to stagger in when triggered by the scroll trigger - I can seem to get it play ball?

 

The letters are having the animation applied to them, but the stagger isn't working?

If someone could point out what I'm doing wrong that would be great.
 

// 'MOVING' WORD
var moving = document.querySelectorAll('span')
if (moving) {
    gsap.utils.toArray(moving).forEach(function(letter) {
        gsap.to(letter, {
                duration: 1,
                y: 0,
                opacity: 1,
                stagger: .1,
                scrollTrigger: {
                trigger: letter,
                toggleActions: 'play pause none reset',
                start: '0 100%',
            }
        })
    })
}

 

Many thanks,

 

Paul

See the Pen pobGwZN by pauljohnknight (@pauljohnknight) on CodePen

[mikel]

Hey @pauljohnknight

 

It is not possible to stagger a single element (.forEach).

So please try

 

var moving = document.querySelectorAll('.moving span');

gsap.to(moving, {
  duration: 1,
  y: 0,
  opacity: 1,
  stagger: .1,
  scrollTrigger: {
    trigger: moving,
    toggleActions: 'play pause none reset',
    start: '0 80%',
  }
})

Happy staggering ...

Mikel

 

[pauljohnknight]

@mikel Wonderful. Thank you.