在 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 显然不是免费的，这就是为什么我不能使用它...