Animation when mapping individual images.

[danielnuwin]

Animation seems to group together all my items in my array when I am trying to have each individual item animate as is its rendered. Anything I am doing wrong?

 const gallery = images.map((obj, i) => {
      return (
        <Animated key={i} animationIn="bounceInRight" animationOut="fadeOut" animationInDelay={40} isVisible={true} animateOnMount={true}>
          <div key={i} className={`` + obj.category} data-category={obj.category}>
            <img alt=""
              className=""
              onClick={(e) => this.openLightbox(i, e)}
              src={obj.thumbnail}
              style={{ width: "100%", height: "auto", display: "block" }}
            />
          </div>
        </Animated>
      );

[digital-flowers]

All your animation has the same delay you can change the delay something like animationInDelay ={i*40}

[danielnuwin]

Thanks that did the trick!!!! Also, the animationOut does not work when I try to filter based on category with a set of buttons like this. Maybe I'm not clearly understanding how the animationOut should work?

     <ul className="portfolio-filter">
          <button className="filter" onClick={() => this.filterImage("*")} >All</button>
          <button className="filter" onClick={() => this.filterImage("Port")}>Portraits</button>
          <button className="filter" onClick={() => this.filterImage("Wed")}>Weddings</button>
          <button className="filter" onClick={() => this.filterImage("Urb")}>Urban</button>
          <button className="filter" onClick={() => this.filterImage("One")}>Single</button>
        </ul>

filter method:

  filterImage(filter) {
    const imagesCopy = this.props.images;
    const newArray = imagesCopy.filter(function (img) {
      let searchValue = img.category;
      return searchValue.indexOf(filter) !== -1;
    });
    if (filter === "*") {
      this.setState({ imageArray: imagesCopy });
    }
    else {
      this.setState({ imageArray: newArray });
    }
  }

[digital-flowers]

for the filter animation, you need to set the isVisible = false then removing them after a certain time