Блог

Я пытаюсь отложить анимацию в начале в 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 в сочетании с обещанием.

Для псевдо)

 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»