GSAP 动画方案

1. GSAP 简介

GSAP（GreenSock Animation Platform）是一个强大的 JavaScript 动画库，它提供了丰富的动画效果和灵活的 API，可以帮助开发者轻松实现各种复杂的动画效果。GSAP 支持 CSS 属性、SVG、Canvas 等多种动画目标，并且可以通过插件扩展其功能。

安装

npm install gsap -S

快速入门

我这里就是用 vue3 来举例

<template>
  <div class="page">
    <div class="gsapbox1" ref="gsapbox1">
      {{ message }}
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

import { gsap } from "gsap";

const message = ref("首页");

const gsapbox1 = ref(null);

onMounted(() => {
  console.log("开始吧");
  // 运动开始
  gsapbox1move();
});

// gsapbox1运动
const gsapbox1move = () => {
  gsap.to(gsapbox1.value, { x: 100, duration: 1, repeat: -1, yoyo: true });
};
</script>

<style lang="scss" scoped>
.page {
  .gsapbox1 {
    width: 100px;
    height: 100px;
    background: red;
  }
}
</style>