在渲染第二个react组件后暂停GSAP动画

import React, { useEffect, useRef } from 'react';
import gsap from 'gsap';

const MyComponent = () => {
  const animationRef = useRef(null);

  useEffect(() => {
    // 创建GSAP动画实例
    const animation = gsap.to('.my-element', { duration: 1, x: 100 });

    // 保存动画实例的引用
    animationRef.current = animation;

    // 启动动画
    animation.play();

    // 组件卸载前的清理函数
    return () => {
      // 暂停动画
      animation.pause();
    };
  }, []);

  return (
    <div>
      <div className="my-element">我是第一个React组件</div>
      <div>我是第二个React组件</div>
    </div>
  );
};

export default MyComponent;