Jump to content
Search Community

GreenSock and Vue.js v2

hce-webagency 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

Dear GreenSock users/staff,

I'm encountering some problems while importing some plugins with ES6 imports in my Vue.js v2 project files.

First of all, a disclaimer:
Npm library "gsap" works as intended, I can import any class using this easy syntax:

 import { TweenMax, TimelineMax, Power0 } from 'gsap'

Recently, I purchased GreenSock's club membership as I needed the extra flavour provided from plugins like DrawSVGPlugin and here is where I found myself in huge troubles.

These are the steps that I took:
 

- I copied the pack I could download from the website inside my assets
- I removed the npm package 'gsap'
- I tried to import various libraries using the same good ol' ES6 import syntax at no avail
 

  import { TweenMax } from '../../../assets/js/vendors/gsap/TweenMax'
  import { DrawSVGPlugin } from '../../../assets/js/vendors/gsap/plugins/DrawSVGPlugin'

When I tried to do this webpack went out of control, 20k+ ESLint errors, TweenLite dependency not found and stuff.

As for the TweenLite dependency there's an easy webpack configuration tweak that I found on this forum:

 resolve: {
    ....
    extensions: ['', '.js', '.vue'],
    fallback: [path.join(__dirname, '../node_modules')],
    alias: {
      ...
      'TweenLite': path.resolve(__dirname, '../src/assets/js/vendors/gsap/TweenLite')
    }
  },

But still I have huge problems with ES6Lint that doesn't come up at all importing the package from npm.

Any idea on how to solve this problem would be hugely appreciated,

 

 

Thanks for the time you've spent reading this,

 

Sincerely yours

Link to comment
Share on other sites

Sorry to hear about the trouble. Hm. It's kinda tough to troubleshoot blind - is there any way you could could zip up your whole working directory and post it here or something? It'd just be really helpful to be able to recreate exactly the issues you're running into so we can poke around a bit. 

 

Have you tried creating an alias for each GSAP class you need? (Not that you should NEED to, but just curious). 

 

(Note: to attach a file to a post here, make sure you zip it first and click the "more reply options" button below)

  • Like 1
Link to comment
Share on other sites

Hi Jack!
Thanks for the kind answer, right now I can't send you the zip you're requesting, I'll try to post it tomorrow with a bit more time.

Right now I can tell you that I've followed some advices to make gsap works with webpack and vue, mainly I've followed these threads:
http://greensock.com/forums/topic/12510-using-webpack-timelinemax-has-references-to-tweenlite/
http://greensock.com/forums/topic/14274-webpack-and-splittext/

 

and some others forums post which I didn't save (my bad :P)

So I've added resources as externals in webpack configuration, I've linked the scripts in my index.html like this: 
 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hce.it</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

    <link rel="stylesheet" href="static/webfonts/MyFontsWebfontsKit.css">
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,700" rel="stylesheet">
  </head>
  <body>
    <div id="hce"></div>
    <script src="static/gsap/TweenMax.js"></script>
    <script src="static/gsap/TimelineMax.js"></script>
    <script src="static/gsap/easing/EasePack.js"></script>
    <script src="static/gsap/plugins/DrawSVGPlugin.js"></script>
  </body>
</html>

And I can use them in my .vue file like this: 
 

  import TweenMax from 'TweenMax'
  import TimelineMax from 'TimelineMax'

It works just fine (even if I'd like to have a private npm repo like others are asking for :P)

The only thing I couldn't yet figure out is how to use the DrawSVGPlugin.
If I import it like the other scripts (import DrawSVGPlugin from etcetc) ESLint just yell at me because I do not instantiate any object from the DrawSVGPlugin class, and even if I instantiate a dummy one (i.e. : var dsvg = new DrawSVGPlugin()) so that ESLint doens't complain anymore the plugin just isn't working.

Thanks again for the kind help

  • Like 1
Link to comment
Share on other sites

Yeah, that's probably the best way of doing it (loading as external files right into your HTML).

 

I'm a little confused about why you'd need to instantiate a DrawSVGPlugin object or something. It's just a plugin that adds functionality to the core GSAP files. So you simply load it and BOOM, you can now define drawSVG:{} stuff in your tweens. See what I mean? It's not like you need to somehow have an import statement at the top and call DrawSVGPlugin itself. Can you just omit that stuff? Does ESLint really not allow you to load an external resource without yelling at you? Seems odd. 

  • Like 1
Link to comment
Share on other sites

I thought that I had to import DrawSVGPlugin inside of my .vue file to make it work, if I can omit to import it and it just plugs itself into TweenMax in a global way then that's good.

Still, drawSVG is not working.
This is my .vue file: 

 

import TweenMax from 'TweenMax'
import TimelineMax from 'TimelineMax'
[..]
animateLogo () {
  let svg = this.$el.querySelector('svg')
  let letters = svg.querySelectorAll('.letters-group polygon')  
  this.$emit('logo-drawn')
  TweenMax.staggerFromTo(letters, 3,
    {
      drawSVG: '0% 0%'
    },
    {
      drawSVG: '0% 100%'
    },
    0.3
    )
}

Right now DrawSVGPlugin is included in my main view and there's an alias for it inside webpack's configuration.

_________________

 

Edit:

Nevermind! Now it works!

As you said, there's not need to import DrawSVGPlugin, I just need to have the alias and it has to be included in the global view. There's a problem with the snippet of code that I have provided you with, as it seems querySelectorAll NodeList isn't getting parsed correctly by TweenMax, that's why it doesn't animate the SVG.

Sorry, my bad!


One last thing, if it's not a problem: I also have some worries with EasePack easings, differently from the DrawSVG plugin I do have to include the classes inside my .vue file, as they have to be used (Power0, Power1 etc).
I have no idea on how to import them and which alias should I use inside the external references of webpack.


If I open DrawSVGPlugin.js, this is the last line of code: 


}("DrawSVGPlugin"));

So I know I have to add this external:
 

"DrawSVGPlugin": "DrawSVGPlugin"

While EasePack.js doesn't have an explicit class it exports that I can use as an alias.
I'll try some things and I'll let you know, as of now though I have no idea on how to make this work.

Thanks for the replies by the way, you were very helpful on clearing my mind about this issue.

Link to comment
Share on other sites

Kind of. It does work but if I do an npm update the gsap package will (maybe) be newer than the greensock club package I've downloaded (since there's no repo for the club).

Of course I can, obviously, download the newer version from your website which will come probably before the release inside npm; this is nevertheless a bad thing for the application workflow.

Thanks again for the kind help, I hope ES6 compliant Gsap will come out soon! Can't wait!

*please gives us any infor on this*

Kindest regards

------
Edit: I've just tried this and now Power0 gives undefined :/

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