jingqi_fan Posted March 15, 2020 Share Posted March 15, 2020 (edited) // 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> <span class="serif">{{ data.country }}</span> </div> Edited March 15, 2020 by jingqi_fan FIGURED OUT WHAT'S WRONG 2 Link to comment Share on other sites More sharing options...
GreenSock Posted March 15, 2020 Share Posted March 15, 2020 Thanks for letting us know that you solved it! Good job. 🙌 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now