azazdeaz / react-gsap-enhancer

Use the full power of React and GSAP together
MIT License
727 stars 38 forks source link

staggerFrom won't work with findAllInChildren #1

Closed harrisrobin closed 9 years ago

harrisrobin commented 9 years ago

Hi,

So I've been playing around with this and noticed that I can't get stagger animations to work with the array returned from findAllInChildren.

I basically have

the following:

render() {
    return (
        <ul styleName="menu">
          <li>
            <Link to={`/`}>
              <span>about</span>
            </Link>
          </li>
          <li>
            <Link to={`/`}>
              <span>work</span>
            </Link>
          </li>
          <li>
            <Link to={`/`}>
              <span>articles</span>
            </Link>
          </li>
          <li>
            <Link to={`/`}>
              <span>music</span>
            </Link>
          </li>
        </ul>
    );
  }

Timline:

function createAnim({target}) {
  var menu = target;
  console.log(menu.findAllInChildren());

  return new TimelineMax({
    repeat: -1
  }).staggerFrom(menu.findAllInChildren(), 1, {
      left: '-3000px',
      ease: Back.easeOut
    }, 0.1);
}

Everything works fine when i simply pass it 'menu', but why can't i pass it it's children?

Thanks for this library btw!

azazdeaz commented 9 years ago

Hi!

Sorry for the delay! Unfortunately i can't reproduce this :( I added a new demo animating list items with stagger.

Can you help me with some more details? Does the console.log(menu.findAllInChildren()); logs the correct array of nodes?

harrisrobin commented 9 years ago

@azazdeaz yes it will log the array correctly, however I noticed that when I do what you did (iterate over an array rather than hard-code the elements), it works. I don't have time to investigate further but I can get back to you this week with an explanation. (feel free to close this and ill re-open it when I have time).

azazdeaz commented 9 years ago

@HarrisRobin Thanks, i leave this open until it turns out what's going wrong. I also tested with "hard-coded" elements like <ul><li/><li/><li/></ul> and it worked as well. Maybe there is a mixin or higher-order component that mix something up.

azazdeaz commented 9 years ago

Hey @HarrisRobin, did you manage to find out what's going wrong?