Jump to content
Search Community

hce-webagency

Members

  • Posts

    4

  • Joined

  • Last visited

Recent Profile Visitors

687 profile views

hce-webagency's Achievements

1

Reputation

  1. hce-webagency
    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 :/
  2. hce-webagency
    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.
  3. hce-webagency
    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 ) 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 ) 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
  4. hce-webagency
    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
×
×
  • Create New...