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

Share this post


Link to post
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 :)

Share this post


Link to post
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

Share this post


Link to post
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.

 

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
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 :)

 

 

 

 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Thank you !

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
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

Share this post


Link to post
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!

Share this post


Link to post
Share on other sites

Hi there!
 

import { gsap } from "gsap";

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?

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
Just now, Georgios Lemonidis said:

tried but no luck! 

 

Can you create a simple repo showing the problem so we can see?

  • Like 1

Share this post


Link to post
Share on other sites
25 minutes ago, Georgios Lemonidis said:

when I'm trying to import globally in main script

 

And imports are no longer global. You will need to add import { gsap, TweenMax } from  "gsap" in every file where you use it.

  • Like 3
  • Thanks 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×