在 Vue.js 中使用来自 GSAP 的 Splittext

Question

我对 GSAP 很陌生，Vue.js。我实际上是第一次使用它。我正在尝试使用 GSAP 的 Splittext 制作文本动画。这就是我所做的，但我收到此错误：gsap__WEBPACK_IMPORTED_MODULE_2__.SplitText 不是构造函数。我真的不明白这是从哪里来的。

<script>
import gsap from 'gsap'
import {TimelineLite, SplitText} from 'gsap';


export default {

    mounted(){
        this.textReveal()
    },

    methods : {
        textReveal(){
            var $text = document.querySelector(".splittext"),
            mySplitText = new SplitText($text, {type:"words"}),
            splitTextTimeline = gsap.timeline();
            gsap.set($text, {perspective:400});
            mySplitText.split({type:"chars, words"});
            splitTextTimeline.from(mySplitText.chars, {duration: 0.5, scale:2, autoAlpha:0,  transformOrigin:"100% 50%", ease: "back.out", stagger: 0.02});
            splitTextTimeline.play();
            
        }
    }
}
</script>

<template>
    <div class="help-page">
        <img class="close" src="@/assets/icons/close.svg" alt="">
        <div class="text-container">
            <h1>What to see</h1>
            <p class="splittext">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Earum, quos, magnam omnis perferendis laboriosam voluptatibus aperiam eligendi rerum fugit esse, ipsum vero quis reiciendis accusantium totam soluta ad. Quia tempore aliquam dolore eligendi amet, id quae sed tempora minus dignissimos deserunt corporis debitis error delectus dicta quidem, alias eaque!</p>
        </div>
    </div>
</template>

感谢您的帮助:)

Answer 1

好吧，Splittext 显然不是免费的，这就是我不能使用它的原因...

在 Vue.js 中使用来自 GSAP 的 Splittext

Using Splittext from GSAP in Vue.js

vue.js

gsap