Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Kevin Abatan

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

Recommended Posts

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 :)

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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.

 

  • Thanks 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

@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! :-D

 

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.

 

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

@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 :)

 

 

 

 

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

  • 4 months later...

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

Thank you !

Link to comment
Share on other sites

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";

 

 

  • Like 3
Link to comment
Share on other sites

  • 2 months later...

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?

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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!

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