Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mango-nyc

Plugin issue with GSAP3 NPM and Nuxt.js

Recommended Posts

I'm having a problem getting GSAP3 PlugIns to work in a Nuxt(2.10.2) project.

 

To make sure it wasn't something else I had installed within my existing project, I created a new base nuxt project and I installed GSAP with the .tgz file from the "npm-install-this" directory.

 

If I add the the base gsap as in 

import { gsap } from "gsap";

it works fine, I ran a small tween to test. 

 

However, when I try to introduce a plugin, as suggested, and refresh the browser- not even using the plugin, just importing it.

import { PixiPlugin } from "gsap/PixiPlugin.js";
gsap.registerPlugin(PixiPlugin);

 

I get an syntax error stating "Unexpected token export" (pic attached)

 

In my troubleshooting, I went back and created a base Vue CLI(v 4.0.5) Project to test, and installed GSAP with the same methods suggested on the site here,  and using the same code as above, and everything works fine. I imported the CustomWiggle plugin and it works fine.

 

So I believe the issue is with Nuxt somehow. I do need to use a Custom Plugin, and I've already started to rewrite my animation in the new format, so I'd hate to go backwards if not necessary.

 

Thanks

 

GSAP3:NuxtIssue.png

Link to comment
Share on other sites

I don't think nuxt supports es-modules. I think nuxt is importing the umd file when you do this.

 

import { gsap } from "gsap";

// It's probably importing this.
import { gsap } from "gsap/dist/gsap";

 

So try importing umd files like this.

 

import { gsap } from "gsap/dist/gsap";
import { PixiPlugin } from "gsap/dist/PixiPlugin.js";
gsap.registerPlugin(PixiPlugin);

 

And if PixiJS is not global, you'll need to register it.

https://greensock.com/docs/v3/Plugins/PixiPlugin/static.registerPIXI()

 

cc @GreenSock @ZachSaucier The installation docs should probably mention that frameworks that do SSR, like nuxt, will probably need to use the umd files.

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

Thanks! That worked perfectly.

Really appreciate it.

Link to comment
Share on other sites

1 hour ago, OSUblake said:

cc @GreenSock @ZachSaucier The installation docs should probably mention that frameworks that do SSR, like nuxt, will probably need to use the umd files.

 

And mention that if a user sees an error like unexpected token import or unexpected token export, that they probably need to use the umd files.

 

Also, add yarn installation instructions.

 

yarn add gsap
yarn add ./gsap-bonus.tgz

 

Sorry, I'm not comfortable editing the docs. I don't know what I'm doing, and if I'll mess something up.

  • Like 2
Link to comment
Share on other sites

Thanks @OSUblake, this works fine using the normal NPM install, and using the "transpile" in build. 

This is even cleaner for me than using the /dist/.

Thanks again for the great solution.

  • Like 2
Link to comment
Share on other sites

  • 2 weeks later...

Hi @OSUblake and @mango-nyc,

 

I've been going in circles, I hope you can help. I'm also trying to get the plugins working inside Nuxt.

GSAP3 itself runs just fine as a normal import, however when trying to get the premium plugins working I'm getting stuck.

 

I've added gsap to Nuxt via Yarn (./gsap-bonus.tgz), and imported gsap and MorphSVG from the folder.

 

If I try import from the non-dist folder (with build / transpile setting as above in the nuxt config ), I get an error :

_toArray is not a function

 

If I import from the dist folder (UMD?), as above, I get a window error. I've encountered this before and understand it's because the SSR side doesn't have a window. If I then wrap the imports in the (process.client) check (to force client side), and convert them to requires instead, I still get a window error.

 

Cannot assign to read only property 'window' of object

 

I've created a CodeSandbox with the zip inside to demonstrate, I will happily paste the link if that's okay.

It'd be great to get a definitive boilerplate setup for these issues. I feel like I've tried all the advice I've seen, but am still getting stuck.

 

Thanks for the support.

 

Edited by kith+kin
Duplicated wording
Link to comment
Share on other sites

3 minutes ago, kith+kin said:

I've created a CodeSandbox with the zip inside to demonstrate, I will happily paste the link if that's okay.

 

Yes!

Link to comment
Share on other sites

Ok, without doing transpile: ["gsap"], I got it to work like this. Using require, it imports an object. 

 

let gsap, Back, MorphSVGPlugin;

if (process.client) {
  const gsapModule = require("gsap/dist/gsap");
  gsap = gsapModule.default;
  Back = gsapModule.Back;
  MorphSVGPlugin = require("gsap/dist/MorphSVGPlugin.js").default;
  gsap.registerPlugin(MorphSVGPlugin);
}

 

Using transpile: ["gsap"], this worked for me.

import { gsap, Back } from "gsap";
import { MorphSVGPlugin } from "gsap/MorphSVGPlugin";

if (process.client) {
  gsap.registerPlugin(MorphSVGPlugin);
}

 

Not sure why the transpile option was causing a problem. Well, at least on codesandbox it was.

 

I'm importing Back because you are using it, but you don't need to if you use the string syntax.  And your morphSVG syntax is wrong. If you're using shapeIndex, you need to use an object.

 

timeline.to(line, {
  duration: 1,
  ease: "back.inOut(1.4)",
  transformOrigin: "center center",
  morphSVG: {
    shape: triangle,
    shapeIndex: 4
  }
});

 

You might need to restart the server because of the hot module stuff.

 

And you can delete your sandbox link if this solves your problem.

  • Like 2
Link to comment
Share on other sites

Ahah! That's great thanks Blake.


So I'm positive I did it the same as what you did (via the transpile method), although I think what might have been breaking it is I used code from GSAP 2, which as you've pointed out wasn't right.

 

I've just ported this over to my in-development site and it's worked.

Really appreciate the assistance.

  • Like 1
Link to comment
Share on other sites

Most of the code from v2 will still work, but you will have to import it. ex.

 

import { gsap, TweenMax, TimelineMax, Power2 } from "gsap";

 

Also, there's a file called all where you can import everything from it. 

 

import { gsap, TweenMax, TimelineMax, MorphSVGPlugin, Draggable } from "gsap/all";

 

  • Like 1
Link to comment
Share on other sites

1 minute ago, OSUblake said:

Most of the code from v2 will still work, but you will have to import it. ex.

 


import { gsap, TweenMax, TimelineMax, Power2 } from "gsap";

 

Also, there's a file called all where you can import everything from it. 

 


import { gsap, TweenMax, TimelineMax, MorphSVGPlugin, Draggable } from "gsap/all";

 

It's weird - I don't have an example to hand, but I basically dropped in some (non-plugin based) GSAP2 code I had previously used in to a new Nuxt project the other day, which worked great on local but after being compiled through the 'generate' command just wouldn't work, that was both transpiling and not.

 

I changed the code to the new syntax, and it started working. I probably should have done the same thing here rather than just assuming.

Is it a better idea to use gsap/all? Is it more useful because everything can be imported from it? are there other benefits?

 

Thank you for your help again.

Link to comment
Share on other sites

On 11/27/2019 at 11:12 AM, kith+kin said:

worked great on local but after being compiled through the 'generate' command just wouldn't work, that was both transpiling and not.

 

Sounds like some stuff might have been dropped due tree shaking. That's what gsap.registerPlugin helps prevent, but I don't know if that was the issue.

 

On 11/27/2019 at 11:12 AM, kith+kin said:

Is it a better idea to use gsap/all? Is it more useful because everything can be imported from it? are there other benefits?

 

There's no benefit other than there is less code for you to write.

import { gsap, TweenMax, TimelineMax, MorphSVGPlugin, Draggable } from "gsap/all";

// vs
import { gsap, TweenMax, TimelineMax } from "gsap";
import { MorphSVGPlugin } from "gsap/MorphSVGPlugin";
import { Draggable } from "gsap/Draggable";

 

 

  • Like 1
Link to comment
Share on other sites

  • 1 month later...
On 11/27/2019 at 5:12 PM, kith+kin said:

It's weird - I don't have an example to hand, but I basically dropped in some (non-plugin based) GSAP2 code I had previously used in to a new Nuxt project the other day, which worked great on local but after being compiled through the 'generate' command just wouldn't work, that was both transpiling and not.

I had similar problem after upgrade gsap to v3 on my next.js project, when run yarn build all animations stopped working (any errors, console was clear just site was broken). In yarn dev mode everything works quite smooth. I had to update timelines to new syntax to make it working fine after yarn build

 

From:

import { TimelineMax } from 'gsap'
...
this.linksTween = new TimelineMax({ paused: true })
...
componentDidMount() {
  this.linksTween.to(
      this.refText.current,
      0.5,
      {
          fill: "#ffffff"
      },
  )
}

To:

import gsap from 'gsap'
...
this.linksTween = gsap.timeline({ paused: true })
...
componentDidMount() {
    this.linksTween.to(
        this.refText.current,
        {
            fill: "#ffffff",
            duration: 0.5
        },
    )
}

 

Link to comment
Share on other sites

  • 9 months later...
  • 1 month later...

Still having the same problem with Nuxt (v. 2.14.6) trying to import it as a plugin.

 

Importing it in each and every component works, but if i want to go the "global" plugin way, i get that "gsap is not defined".

 

I tried everything mentioned in this post and this post (

) without any luck.

Link to comment
Share on other sites

2 hours ago, Christos Tsangaris said:

Importing it in each and every component works, but if i want to go the "global" plugin way, i get that "gsap is not defined".

AFAIK the only way to avoid importing GSAP in each file is to load GSAP (and any relevant plugins) before you load your bundle entirely. Is that what you're saying isn't working?

Link to comment
Share on other sites

I wonder if there's a way for you to just define certain globals in a configuration file or something. Have you checked with the Nuxt community @Christos Tsangaris?

Link to comment
Share on other sites

19 hours ago, ZachSaucier said:

AFAIK the only way to avoid importing GSAP in each file is to load GSAP (and any relevant plugins) before you load your bundle entirely. Is that what you're saying isn't working?

There is a way you can use CDN link on the head inside nuxt.config.js, but then again i want to go via the NPM route.

 

I ended using a package that helps with all issues mentioned above: https://github.com/ivodolenc/nuxt-gsap-module

 

Thanks for the help btw!

  • Like 2
Link to comment
Share on other sites

  • 1 month later...

Hi, I just bumped into this 😀  @GreenSock @ChristosTsangaris Thanks for sharing, I appreciate it.

 

I see that many people have the same problem with importing Gsap into Nuxt. It's actually very easy. I will share a few tips.

 

There are two (most common) ways to import Gsap into Nuxt:

 

1. Global import

 

Create Nuxt plugin and import Gsap

// ~/plugins/gsap.js

import { gsap } from 'gsap'

// Inject gsap's core for global use
export default (context, inject) => {
  inject('gsap', gsap)
}

 

Enable it in nuxt.config.js

// nuxt.config.js

export default {
  plugins: ['~/plugins/gsap.js'],
}

 

Access GSAP globally by using this.$gsap

<!-- index.vue -->

<template>
  <div>
    <h1>NUXT GSAP</h1>
  </div>
</template>

<script>
  export default {
    mounted() {
      this.rotation()
    },
    methods: {
      rotation() {
        // Access GSAP by using 'this.$gsap'
        this.$gsap.to('h1', { rotation: 27, x: 100, duration: 1 })
      },
    },
  }
</script>

 

2. Local import (import it in every file where you use it)

 

Let's say you want to use it in 'About' page:

<!-- about.vue -->

<template>
  <div>
    <h1>NUXT GSAP</h1>
  </div>
</template>

<script>
  import { gsap } from 'gsap'

  export default {
    mounted() {
      this.rotation()
    },
    methods: {
      rotation() {
        gsap.to('h1', { rotation: 27, x: 100, duration: 1 })
      },
    },
  }
</script>

 

But you also want to use it later in the 'Contact' page. All you need to do is repeat the import process:

<!-- contact.vue -->

<template>
  <div class="content">
    <div class="box"></div>
  </div>
</template>

<script>
  import { gsap } from 'gsap'

  /**
   * Gsap plugins
   *
   * Use 'process.client' to avoid 'Window is not defined' errors
   * This is due to the 'server-side' rendering.
   */
  if (process.client) {
    const { ScrollTrigger } = require('gsap/ScrollTrigger')
    gsap.registerPlugin(ScrollTrigger)
  }

  export default {
    mounted() {
      this.animateOnScroll()
    },
    methods: {
      animateOnScroll() {
        gsap.to('.box', {
          x: 500,
          ease: 'Power1.easeInOut',
          scrollTrigger: {
            trigger: '.content',
            pin: true,
            end: 'bottom',
            scrub: true,
          },
        })
      },
    },
  }
</script>

<style>
  .content {
    width: 100vw;
    min-height: 200vh;
  }
  .box {
    width: 100px;
    height: 100px;
    background-color: #00c58e;
  }
</style>

 

Another option to consider is Nuxt Gsap Module

 

If you don't want to bother with these steps (manual instalation and import), simply install nuxt-gsap-module and you are ready to go. I developed this module to simplify installation process.

 

When you install and enable the module, it will automatically inject the GSAP's core into the nuxt context and you can use GSAP globally trought the app. No need to manually import GSAP into additional plugins (clean workflow).

 

This is very useful because someone unfamiliar with Nuxt (SSR) may have trouble integrating GSAP into the nuxt plugins (a common problem with "Window is not defined, etc."). Also, the module allows you to add additional GSAP add-ons such as ScrollTrigger etc. with a few line of code (true or false) inside main nuxt.config.js file.

 

Pros:

- Helps you integrate GSAP javascript animation library
- Allows you to easily animate elements via custom v-gsap directive
- Provides a solution for global use via this.$gsap
- Zero-config setup ready to go

 

Cons:

- Unfortunately, it doesn't support GSAP Club plugins (at the moment)

 

Sorry for long post 😀 and I hope this helps someone.

  • Like 5
Link to comment
Share on other sites

  • 1 month later...

Thanks for sharing, @Ivo Dolenc.

Your solution is very, very fine. What we really need of course is an integration with the club plugins. On  https://github.com/ivodolenc/nuxt-gsap-module/issues/4 you mentioned that you are currently busy with other projects. Please consider making some time to continue this nice peace of work. The Nuxt/Gsap family will be very grateful! 

  • Like 2
Link to comment
Share on other sites

  • 8 months later...

I tried using the global method suggested above but I was unable to get the this.$gsap to work...

this.$gsap
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.
×