Jump to content
Search Community

SplitText error in Nuxt.js

jingqi_fan test
Moderator Tag

Recommended Posts

// FIGURED IT OUT

I was calling new SplitText everytime the value "fadein" changes which caused a bunch of deeply nested <span> tags and messed up the animation.

 

 

Hello,

 

I've followed this thread https://greensock.com/forums/topic/23007-importing-plugins-in-nuxt/ to install gsap from gsap-bonus.tgz and import the premium plugin, SplitText, like below in a component file:

// in Heading.vue 
import { gsap } from 'gsap'
import { SplitText } from 'gsap/SplitText'

if (process.client) {
  console.log('registered')
  gsap.registerPlugin(SplitText)
}

and added the code below in nuxt.config.js

 // in nuxt.config.js
 build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {},
    transpile: ['gsap']
  }

It seems that SplitText is imported correctly but when I try to animate text like below through a watcher(everytime fadein changes, the animation runs):

 // in Heading.vue  
 watch: {
    fadein(val) {
      const tl = gsap.timeline()
      const chars = new SplitText('.sans', { type: 'chars' })
      if (val) {
        tl.to(chars, {
          duration: 0.8,
          opacity: 1,
          ease: 'power2.out',
          stagger: 0.01
        })
      } else {
        tl.to(
          chars,
          { duration: 0.8, opacity: 0, ease: 'power2.out', stagger: 0.01 },
          '+=0'
        )
      }
    }
  }

The HTML structure I have is like so:

    <div class="heading-inner">
      <span class="sans">{{ data.area }},</span>&nbsp;<span class="serif">{{
        data.country
      }}</span>
    </div>

 

Edited by jingqi_fan
FIGURED OUT WHAT'S WRONG
  • Like 2
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...