How to use Greensock plugin in vue-cli Webpack project (vue.js)

Question

I've set up a vue.js project using vue-cli webpack. I want to use Greensock animation plugin in my project so I ran

npm install greensock --save

and it's installed.

in main.js file I added

import { TweenMax } from "greensock"

I don't know if this makes Greensock plugin available as I get syntax error at Tweenmax.to ... in a component file

export default {
  name: 'HelloWorld',
  el: '.hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  method: {
    TweenMax.to(el, 2, {opacity: 0})
  }
}

I didn't come across a documentation for using Greensock in vue.js project so I would appreciate some help.

Answer 1

You have just to make two change:

• fix a typo in your methods, method should be methods

• inside your methods you should define a function which execute your logic

  method: { TweenMax.to(el, 2, {opacity: 0}) }

will be:

 methods: {
    myTween(){
      ///...put here your ui logic
    }
  }

all the best