[GSDevTools with npm, Webpack and Vuejs 2.x]

6 hours ago, GreenSock said:

Short answer:

//assuming you've put the GSDevTools.js file from the bonus-files-for-npm-users folder into your node_modules/gsap folder..
import GSDevTools from 'gsap/GSDevTools';

 

Explanation: GSAP isn't fully written in ES6 yet (working on that). For now, "gsap" simply points to the TweenMax.js file which contains most of the essential classes and plugins, but NOT all of them. GSDevTools is NOT inside of TweenMax - you must load that separately. So when you tried to import it from "gsap" (which, again, points to TweenMax), it didn't find it because it's not exported there. For anything that's not inside TweenMax, you can just import it directly from that folder. Just don't forget to drop all the bonus stuff in there too (from the bonus-files-for-npm-users folder in the zip download). 

 

Make sense? Sorry about any confusion. 

 

 

Thanks for the reply, no problem for the confusion.

I've tried again importing with  

import GSDevTools from 'gsap/GSDevTools';

 

but got the same error. I've already tried all these possibilities

 

9 hours ago, AngusSimons said:

 

import {GSDevTools} from 'gsap'

// or

import GSDevTools from 'gsap/GSDevTools'

// or 

import GSDevTools from '../../../node_modules/gsap/GSDevTools'

// or 

import * as GSDevTools from '../../../node_modules/gsap/GSDevTools'

// or

var GSDevTools = require ('gsap/GSDevTools')

// or

var GSDevTools = require ('../../../node_modules/gsap/GSDevTools')

 

 

[Page Transitions -- Would this approach work ?]

I think that one big cons with localStorage and sessionStorage is that your page transitions will not work with history on the browser. And the workaround for this issue make more convenient to use a SPA.

[GSDevTools with npm, Webpack and Vuejs 2.x]

Hey folks,

 

I'm trying to setup GSDevTools on a Vuejs using Npm and Webpack.

 

All the plugins are in the folder:

/node_modules/gsap

 

I'm using Vuejs and my component looks like:

<template lang="html">
  <div>
    <div id="animate" @click="animateIt">
      content
    </div>
  </div>
</template>

<script>
  import {TimelineMax, CSSPlugin, Sine, GSDevTools} from 'gsap'

  export default {
    name: 'ComponentName',
    data: () => ({
      var_1: 'dummy'
    }),
    methods: {
      animateIt: function() {
        var t1 = new TimelineMax()
        t1.to('#animate', .2, {
          opacity: 1,
          ease: Sine.easeInOut
        })
          .to('#animate', .2, {
            css: {
              color: red,
            },
            ease: Sine.easeIn
          })
      }
    },
    mounted() {
      GSDevTools.create()
    }
  }
</script>

 

For others plugins they work as expected so i can import them when needed using for example:

import {TimelineMax, CSSPlugin, Sine, Power4} from 'gsap'

 

But if I add the GSDevTools as for the others this doesn't work.

 

If I import the plugin with:

import {GSDevTools} from 'gsap'

// or

import GSDevTools from 'gsap/GSDevTools'

// or 

import GSDevTools from '../../../node_modules/gsap/GSDevTools'

// or 

import * as GSDevTools from '../../../node_modules/gsap/GSDevTools'

// or

var GSDevTools = require ('gsap/GSDevTools')

// or

var GSDevTools = require ('../../../node_modules/gsap/GSDevTools')

 

I got this error:

Quote

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'create' of undefined"

 

 

I'm stucked, please Help!!!

Thanks