staggerFrom not working on component rendered with API fetched data

[George I.]

Hi guys,

 

This may look like a dumb question for all you gurus out there but I can't seem to make it work.

 

I have a React component that renders several child components (like an <ul> with <li>s), with content for the child components being fetched through an API and then passed as props. I want to staggerFrom the child components once everything is rendered. If I pass hardcoded props it works just fine, but when I pass props that were fetched through the API the staggerFrom doesn't kick in at all.

 

What am I doing wrong here?

See the Pen eXwBOq?editors=0010 by rainmanx (@rainmanx) on CodePen

[GreenSock]

I'm not familiar with React, so @Rodrigo will probably chime in with the "right" answer, but it looks like the problem is that you create your GSAP animations BEFORE you actually get the dynamic data and populate things. Add a few console.log() calls and see what I mean. So I'd suggest waiting until that data populates before you actually animate things. I assume there's a way in React to do that relatively easily. 

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

You got really close, in fact you even created a boolean to check when the data fetching is completed. All you have to do is compare that part of the state in the componentDidUpdate() method in order to trigger the animation, just change your component to this and it should work as expected:

 

componentDidMount() {
  this.fetchUsers();
}

componentDidUpdate (preProps, preState) {
  if ( preState.isFetching && preState.isFetching !== this.state.isFetching ) {
    TweenMax.staggerFrom('#list-1 li, #list-2 li, #list-3 li', .5, {
      x: -10,
      autoAlpha: 0
    }, .2);
  }
}

 

Basically this compares the the isFetching property of the state before and after every update. Since the only case where the previous value is true and the next value is false, is after getting the data from the API, you can trigger the animation there.

 

Happy Tweening!!

[George I.]

@Rodrigo, you're a life saver. Works like a charm. Thank you!