Jump to content
Search Community

Stagger Animation Not Working

ericnguyen23 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey Eric,

 

If you console.log(this.card) you will see that it only points to the last element. staggerFrom requires an array of elements.

 

As such, you need to change your React code to refer to an array of elements. I did that by changing 'this.card = null' to 'this.cards = []' and inside of each ref= I changed it to 'this.cards[x]' where x is the counter. There might be a better way of doing this in React, I'm very new to it. 

 

Demo here: 

 

See the Pen pmpqOM?editors=0010 by ZachSaucier (@ZachSaucier) on CodePen

  • Like 3
Link to comment
Share on other sites

Good question. Under the hood staggerFrom (and most if not all selectors in GSAP) use .querySelectorAll when a text selector is given, which returns an array of HTML nodes. That's why the demo works on the documentation page. 

 

It turns out that React does let GSAP use that approach as well, which simplifies things a bit:

 

See the Pen rgpPMj?editors=0010 by ZachSaucier (@ZachSaucier) on CodePen

  • Like 4
Link to comment
Share on other sites

21 minutes ago, ZachSaucier said:

It turns out that React does let GSAP use that approach as well, which simplifies things a bit:

 

Just like to point out that using selectors may cause problems if you're not careful. See my post and demos at the end of this thread.

 

 

 

  • Like 2
Link to comment
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.
×
×
  • Create New...