gsap的插件在vue中怎么使用

在Vue中使用GSAP插件，需要先安装gsap模块：

npm install gsap

在Vue组件中引入gsap：

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

export default {
  mounted() {
    // 使用ScrollTrigger插件
    gsap.registerPlugin(ScrollTrigger);

    // 编写动画
    gsap.to(".box", {
      x: 100,
      duration: 1,
      scrollTrigger: {
        trigger: ".box",
        start: "top center",
        end: "bottom center",
        toggleActions: "play none none none",
      },
    });
  },
};

上面的代码中，我们引入了gsap和ScrollTrigger插件，然后在mounted生命周期钩子函数中使用registerPlugin方法注册了ScrollTrigger插件。接着，我们编写了一个简单的动画，使用to方法对.box元素进行位移。在scrollTrigger属性中，我们定义了触发器和动画的开始和结束位置，以及动画的播放方式。

注意，在Vue中使用GSAP插件时，需要确保组件已经挂载，才能使用DOM元素。因此，我们在mounted生命周期钩子函数中编写动画。