通过React钩子实现组件的动画。Gsap没有响应

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

const AnimatedComponent = () => {
  useEffect(() => {
    gsap.to('.element', { duration: 1, x: 100 });
  }, []);

  return <div className="element">Animate Me!</div>;
};

export default AnimatedComponent;

useEffect(() => {
  const element = document.querySelector('.element');
  if (element) {
    gsap.to(element, { duration: 1, x: 100 });
  }
}, []);

const AnimatedComponent = ({ targetX }) => {
  useEffect(() => {
    gsap.to('.element', { duration: 1, x: targetX });
  }, [targetX]);

  return <div className="element">Animate Me!</div>;
};

.element {
  position: relative; /* 确保元素可以被定位 */
}

npm install gsap@latest