Stagger Animation Not Being Applied By ScrollTrigger

[pauljohnknight 22 Likes (Newbie)]

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 4,752 Likes (Superhero)]

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 22 Likes (Newbie)]

@mikel Wonderful. Thank you.