javascript GSAP和React StaggerTo

Posted 2021-05-03

constructor(props){
  super(props);
  this.myTween = new TimelineLite({paused: true});
  this.myElements = [];
}

componentDidMount(){
  this.myTween.staggerTo(this.myElements, 0.5, {y: 0, autoAlpha: 1}, 0.1);
}

render(){
  return <div>
    <ul>
      {elementsArray.map((element, index) => <li
        key={element.id}
        ref={li => this.myElements[index] = li}
      >
        {element.name}
      </li>)}
    </ul>
  </div>;
}