Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
George I.

staggerFrom not working on component rendered with API fetched data

Recommended Posts

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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!!

  • Like 5
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.
×