Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
pauljohnknight

Stagger Animation Not Being Applied By ScrollTrigger

Recommended Posts

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

Link to post
Share on other sites

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

 

  • Like 4
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×