How to use GSAP with Vue/Webpack (vue-cli + webpack template)

[Kevin Abatan 0 Likes (Newbie)]

Hello all !!

 

Im new on the forum, so nice to meet you all 

 

So, here is my problem: I purchased the club greensock license in order to get thoses nice features but i can't get it to work with Vue and Webpack (webpack template + vue-cli).

 

But since im using the enhanced version of the framework, im not getting files from NPM anymore, i got to use the source from the zip archive.

So im a big noob with webpack, i discover webpack with version 1.x, i was horrify, since V2 seems more friendly user, i deciding to use it with Vue, and since we have Vu-cli, well you have to go with Webpack if your using Vue

 

Anyway, i don't know how to make it work.

 

If somone got an idea for the configuration, the way to `import` Plugins ? I'd like to use MorphSVGPLugin, but i just don't know how to get it. I tried everything...

I also created a local npm package... But it didn't worked... I need to got my website online on Thursday, i really need help ^^

 

PS: with the free license, i can get things running because i'm using it like this:

import { TweenLite, ... } from 'gsap'

 

How can i do this for the MorphSVGPlugin ?

 

Thx for future help, and thx for GSAP, very nice framwork

[OSUblake 9,990 Likes (Superhero)]

Hi @Kevin Abatan

 

Just put your bonus plugins in some folder, and import them after your gsap import. Here's an example showing the MorphSVGPlugin. Note that it will only work on webpackbin.

 

https://www.webpackbin.com/bins/-KqBjQeme40lBrXDnbbQ

 

 

[Kevin Abatan 0 Likes (Newbie)]

Hello @OSUblake

 

My problem, i think, is that i (maybe) don't know how to use this plugin, this is my code:

 

import { TimelineMax } from 'gsap'
import SvgWidget from './Svg.vue'
import OrbitPathSvg from '../svg/OrbitPath.vue'
import MorphSVGPlugin from '../gsap-plugins/MorphSVGPlugin'

export default {
  name: 'orbit-widget',
  props: ['animated'],
  components: {
    SvgWidget,
    OrbitPathSvg
  },
  data () {
    return {
      items: ['music', 'food', 'science', 'movie'],
      current: 'food'
    }
  },
  methods: {
    next: function () {
      var position = this.items.indexOf(this.current)
      this.current = (position + 1 >= this.items.length) ? this.items[0] : this.items[position + 1]
    },
    orbit: function (el, done) {
      var tl = new TimelineMax()
      var path = MorphSVGPlugin.pathDataToBezier('#path0_fill') // <---- Here i got: Cannot read property 'pathDataToBezier' of undefined
      tl.to(el, 2, {
        bezier: {
          values: path,
          type: 'cubic'
        },
        ease: 'Linear.easeNone',
        repeat: -1
      })
      tl.call(this.next)
      tl.repeat(-1)
      tl.play()
    }
  }
}

 

This code doesn't work, is there another way to achive this (i want to do an orbit effect, i created few ellipses in order to get the path element of the SVG, but i can't use the pathDataToBezier method because MorphSVGPlugin is undefined.

 

Do you have any idea on how to use this plugin ?

 

Thx

[OSUblake 9,990 Likes (Superhero)]

Hi @Kevin Abatan

 

Your syntax looks fine, so I don't know what the issue is. Can you send me what you have so I can take a look? You can send me a PM if you don't want to post it publicly.

 

[Kevin Abatan 0 Likes (Newbie)]

@OSUblake I send you a private message i think, did you get it 

[OSUblake 9,990 Likes (Superhero)]

Yep. I'll look at it in a bit.

[OSUblake 9,990 Likes (Superhero)]

@GreenSock What would cause a plugin to remain on _gsQueue?

 

@Kevin Abatan I got a chance to look into your issue. It seems that the problem is that when you import a GSAP plugin from a regular folder, at least in the components folder, it's expecting it to be written as an ES module with an export default. GSAP plugins currently don't use ES modules which is causing the problem.

 

I'm no expert in using the vue-cli or Hot Module Replacement (HMR), so there might be some setting or plugin to get around that. If anybody reading this knows, please do share! 

 

In the meantime, here's how you can work around that. Copy your plugins into the node_modules > gsap folder. Once you do that, you should be able to import the MorphSVGPlugin like this.

 

import { TimelineMax } from 'gsap'
import MorphSVGPlugin from 'gsap/MorphSVGPlugin'

 

Let us know if that fixes the issue.

 

[GreenSock 8,117 Likes (Superhero)]

The only reason I can think of that'd cause a plugin to remain in _gsQueue is if _gsScope._gsDefine isn't defined which basically means that the core TweenLite hasn't loaded (and TweenLite is inside TweenMax, so as long as that's loaded, you should be fine too). I'm not very familiar with how a lot of these transpilers/bundlers do things under the hood but it sure sounds like an issue related to that since we know that importing the way you just suggested works well in virtually all the transpilers/bundlers. 

[OSUblake 9,990 Likes (Superhero)]

Yeah, I couldn't figure it out. It has something to do with hot reloading, which is a pretty complicated concept.

[Kevin Abatan 0 Likes (Newbie)]

@OSUblake

 

Hello  this workaround fixed the problem in local, but when i compile with webpack in order to serve my files on server, it didn't work

 

So i currently use less complicated transition, but i would be nice to have that on production

 

 

 

 

[OSUblake 9,990 Likes (Superhero)]

On 10/16/2017 at 10:13 AM, Kevin Abatan said:

Hello  this workaround fixed the problem in local, but when i compile with webpack in order to serve my files on server, it didn't work

 

Crazy! I'll have a look at it this weekend, and let you know what I find.

[cytron 0 Likes (Newbie)]

Hello, has someone found anything about the webpack not able to compile the added gsap plugins?

Thank you !

[OSUblake 9,990 Likes (Superhero)]

One thing I noticed with some CLI tools is that tree-shaking will remove imports that aren't being called directly. So try importing stuff without a name.

 

import "gsap";
import "gsap/DrawSVGPlugin";

 

 

[Macmac 2 Likes (Newbie)]

Been on this for hours ? I've recently purchased the club greensock license, and I'm trying to use some premium plugins in my project, unsuccessfully.

I'm using the plugins with the vue cli webpack template... Has anyone been able to get this working? If so, could you please share some of your setup? I've been going through multiple forum posts involving module bundler bugs. I've tried out so many suggestions, nothing ever works.

 

I am not super familiar with customizing webpack, normally I simply import different modules and everything works. Not the case with the greensock plugins unfortunately. I've tried loading them in different ways (/src/assets or copying them directly in node_modules/gsap), but nothing seems to work for me ?

 

I always get errors, depending on what hack I'm doing (based on previous forum posts), most of the time one of these:
 

Cannot read property '_gsDefine' of undefined

Module not found: Error: Can't resolve '../TweenLite.min.js' in ....

document not defined...

 

Since vue is getting pretty popular, and I'm guessing lots of people are using the vue-cli webpack template, I was hoping that someone could post here how they got the club greensock plugins to work?

[Macmac 2 Likes (Newbie)]

Oh well, never mind.. I was losing my mind with these errors, so I created a brand new project using vue-cli, and then added the plugins in the node_module/gsap and import them.. And it works.

So I guess there is something wrong in my original project, sorry!

[GreenSock 8,117 Likes (Superhero)]

Glad you figured it out, @Macmac. And thanks for joining Club GreenSock! Please let us know if you need any other assistance. The bonus plugins should work great with Vue (or whatever). Enjoy!