Jump to content
Search Community

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

Kevin Abatan test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

@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

  • 4 months later...
  • 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

  • 1 year later...
1 minute ago, Georgios Lemonidis said:

does not work for me anymore (v3.0.1) when I'm trying to import globally in main script... I get TweenMax is not defined everywhere.

Any advice?

 

Are you upgrading an existing project? The new syntax for tweens is gsap.to(".class", { x: 100, duration: 1 });.

 

Check out the release notes.

 

If you need TweenMax for backwards compatibility, just import it.

 

import { gsap, TweenMax } from "gsap";

 

  • Like 1
Link to comment
Share on other sites

3 minutes ago, OSUblake said:

 

Are you upgrading an existing project? The new syntax for tweens is gsap.to(".class", { x: 100, duration: 1 });.

 

Check out the release notes.

 

If you need TweenMax for backwards compatibility, just import it.

 


import { gsap, TweenMax } from "gsap";

 

tried but no luck! 

import from cdn works though with the backwards compatibility

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