Jump to content
Search Community

ScrollTrigger with Nuxt

abbdab test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

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

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

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);
}

 

  • Like 3
Link to comment
Share on other sites

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

  • Solution
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

 

  • Like 1
Link to comment
Share on other sites

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();
}

 

  • 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...