abbdab Posted August 16, 2021 Share Posted August 16, 2021 Greetings Gsap fam, Trying to implement GSAP with Nuxt and I keep getting 'revert is not a function' in ScrollTrigger's JavaScript. I have used GSAP earlier with Vue 3 and didn't have this issue. Any help would be appreciated. Link to comment Share on other sites More sharing options...
Cassie Posted August 16, 2021 Share Posted August 16, 2021 Hello @abbdab We've got a nuxt template on codesandbox - take a look at how the imports work there, maybe you're doing something differently? If that doesn't help could you give us a bit more info? Maybe share a minimal demo if possible - or if not, let us know the way you're attempting to import or use scrollTrigger?https://codesandbox.io/s/gracious-bohr-bh3np Link to comment Share on other sites More sharing options...
OSUblake Posted August 16, 2021 Share Posted August 16, 2021 Keep in my mind that Nuxt doesn't support ES Modules by default. You can set your nuxt.config to transpile gsap... build: { transpile: [ "gsap" ] } Or import UMD files from the dist folder. import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; if (process.client) { gsap.registerPlugin(ScrollTrigger); } 3 Link to comment Share on other sites More sharing options...
abbdab Posted August 17, 2021 Author Share Posted August 17, 2021 14 hours ago, OSUblake said: Keep in my mind that Nuxt doesn't support ES Modules by default. You can set your nuxt.config to transpile gsap... build: { transpile: [ "gsap" ] } @OSUblake Tried this but I'm getting an error that ScrollTrigger is not defined. Do I have to still import ScrollTrigger in the file? My apologies, I'm new with Nuxt and I've been thrown at the deep end at my work. Quote Or import UMD files from the dist folder. import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; if (process.client) { gsap.registerPlugin(ScrollTrigger); } I did try this but i kept getting the revert is not an option error. Link to comment Share on other sites More sharing options...
Solution OSUblake Posted August 17, 2021 Solution Share Posted August 17, 2021 1 minute ago, abbdab said: Do I have to still import ScrollTrigger in the file? Yes, you should import gsap and ScrollTrigger into every file that uses it. The transpile option I mentioned is so you don't have to import from the dist folder. So using the transpile option. import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; if (process.client) { gsap.registerPlugin(ScrollTrigger); } And not using transpile. import { gsap } from "gsap/dist/gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; if (process.client) { gsap.registerPlugin(ScrollTrigger); } As for the error you're getting, do you think you can create a minimal demo of it using the template provide? https://codesandbox.io/s/gracious-bohr-bh3np?file=/pages/index.js 1 Link to comment Share on other sites More sharing options...
abbdab Posted August 17, 2021 Author Share Posted August 17, 2021 @OSUblake You legend! Its working now. I was earlier importing without setting up transpile and maybe that's why it was giving me error. Just tried and it's working smoothly now 1 Link to comment Share on other sites More sharing options...
OSUblake Posted August 17, 2021 Share Posted August 17, 2021 Sorry, I should have been clear about what transpile does. 1 Link to comment Share on other sites More sharing options...
abbdab Posted August 17, 2021 Author Share Posted August 17, 2021 @OSUblake no worries. One last quick question, from my understanding I have to stop ScrollTrigger beforeUnmount / beforeDestroy in Nuxt. What's the best approach to do that? Link to comment Share on other sites More sharing options...
OSUblake Posted August 17, 2021 Share Posted August 17, 2021 If you want to kill all the scroll triggers, like on a page change, you can do this. beforeDestroy() { ScrollTrigger.getAll().forEach(t => t.kill()); } Or if you want to kill a specific one, you can do this. mounted() { this.animation = gsap.timeline({ scrollTrigger: { ... } }) ... } beforeDestroy() { this.animation.scrollTrigger.kill(); this.animation.kill(); } 4 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