gsap动画库入门

目录

前言

一、基本用法

(一) 安装

(二) 语法

(三) 简单动画

二、配置

(一) 动画方法

1. to

2. from

3. fromTo

4. set

(二) 动画目标

(三) 动画属性

---

前言

官网：https://gsap.com/

中文文档：GSAP 中文教程 中文文档 ｜官方文档 官方教程翻译 ｜好奇代码出品

gsap

• 一个强大的动画库，兼容多个框架，可以帮助网站快速写出优雅美丽的动画效果

一、基本用法

(一) 安装

pnpm install gsap

(二) 语法

效果：class类名为box的元素向x轴平行移动200px

gsap.to(".box", { x: 200 })

从这个图可以看出关键属性有三个

• method：方法
• target：目标元素
• variables：动画配置

(三) 简单动画

结合Vue3实现刚刚的效果，注意需要页面挂载完成才可实现动画，故使用onMounted钩子函数

<script setup lang="ts">
import { gsap } from "gsap";
import { onMounted } from "vue";

onMounted(() => {
  gsap.to(".box", {
    x: 300, //