如何在gsap中延迟动画以做出反应

问题描述

我正在尝试从gsap开始延迟动画，它会立即播放并下载，这是我第一次使用gsap。我尝试添加暂停，但是它什么也没做，不确定我是否使用了错误。下面是我尝试的代码，动画有效，但是我尝试了暂停，但没有成功。

class About extends Component {
  constructor(props) {
    super(props);
    this.header = React.createRef();
    
  }

  componentDidMount() {
    const tl = gsap.timeline({ 
        paused: true
      });
    gsap.from(this.header.current,0.7,{
      translateY: 80,ease: "power2.out",autoAlpha: 0,});

    
  }

 render() {
    return (
<div className="caption">
                  <h3 className="header" ref={this.header}>
                    Get to KNow <span>Us</span>
                    <Circle className="circle" />
                  </h3>
                  <p className="body" ref={this.words}>
                    We offer you the flexibility to receive and send money using
                    cash transfers.
                  </p>
)
}
}

解决方法

目前尚不清楚您要做什么，但我想也许您可以简单地将async函数与promise结合使用。

对于伪）

foo = (delay) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve();
        },delay)
    })
}

bar = async() => {
    await foo();
    // something you want to do with gsap
}

componentDidMount(){
    this.bar();
}

,

我要做的就是添加“ delay：1”