Jump to content
Search Community

Using Splittext with vue.js

Maelle test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

Hello everyone ! 

 

I am very new to GSAP and Vue.js and I am having some trouble with an animation. 

 

This is what I did. 

<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.</p>
            
        </div>
    </div>
</template>
<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>

but I am getting this error : TypeError: gsap__WEBPACK_IMPORTED_MODULE_2__.SplitText is not a constructor

 

I know I am missing something here but I don't know what it is .... 

 

Thank you so much in advance for your help :) 

Link to comment
Share on other sites

  • Solution

Hi and welcome to the GreenSock forums.

 

SplitText is a Club GreenSock plugin, so you need to purchase a membership to download it and use it, or reference it in your NPM installation. That's why webpack is throwing that error, basically you're importing something that is not in the GSAP package installed in your app.

 

After you become a member you can use it in your projects. In the meanwhile there are "open" versions of the Club's plugins that you can use in Codepen and Codesandbox, so you can try the plugins, see how they work and be completely sure about becoming a member. You can check them here:

 

See the Pen OPqpRJ by GreenSock (@GreenSock) on CodePen

 

Jut copy the link, go to Codesandbox, create a free account, create a new Sandbox, select either a Vue or Vue3 app and in the external resources tab (in the sidebar) and paste the link for the SplitText plugin. Then in your <script> tag, simply create a reference to it and register the plugin. Here is a live example that follows that pattern:

 

https://codesandbox.io/s/l261n378km?file=/src/App.vue

 

The only difference is that this sample uses the ScrambleText plugin instead of the SplitText plugin, but the procedure is the same.

 

Happy Tweening!!!

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...