l另一个重要的动画插件是splitText，可以方便的用来做文字动画效果。一个最基础的用法，例如
<template> <div class="split">Hello World</div></template><script setup>import { onMounted, ref } from 'vue'import { gsap } from 'gsap'import { SplitText } from "gsap/SplitText";onMounted(() => { gsap.registerPlugin(SplitText) let split = SplitText.create(".split", { type: "words, chars" }); gsap.from(split.chars, { duration: 1, y: 100, autoAlpha: 0, stagger: 0.05 });})</script>
上面的代码可以让hello world有飘出的动画效果
从名字也可以看出。splitText插件基础功能就是对文字，按照一定的规则做拆分。最终的结果依然是html结构被拆分，但是不需要开发者预先处理。
//开发时
<div>hello world</div>
//最终结果
<div>
<div>h</div>
<div>e</div>
<div>l</div>
<div>l</div>
<div>o</div>
<div>w</div>
<div>o</div>
<div>r</div>
<div>l</div>
<div>d</div>
</div>
在SplitText.create方法中，第一个参数是要拆分的元素，可以是一个类名字符串，也可以是对应的element元素，或者是一个数组。第二个参数是配置项。其中
type，表示分割的类型，是由words，chars，lines的组成的字符串，英文逗号分隔。表示按单词，字母和行来分割。默认值为"chars,words,lines”，空格不会被看作字符。
mask，可以为文字添加简单的遮罩，达到一种“浮现”的效果，默认undefined，可以设置“words”，“lines”和“chars”。
autoSplit，当分割完成后元素的宽度发生变化，这时候可能会出现奇怪的换行。就可以将autoSplit设置为true，会在宽度变化时执行回退并重新分割。默认值是false。
onSplit，如果设置了autoSplit，那么动画相关的设置就需要在onSplit函数中返回。这个函数会在每次分割完成后都会执行。不设置autoSplit为true也可以将动画写入其中。
split.revert()方法可以回退分割结果，让文字重新回到开发时写的html结构。
更多有关splitText插件的用法可以查看官方文档
