controller error nuxt js?

MDALIMULALRAZY commented 3 years ago

// this.$scrollmagic.Controller is not a constructor

startAnim(){
   const controller = new this.$scrollmagic.Controller();
    var tmline = gsap.timeline()
  .from('.container',{duration:1, x:'-100%', ease:"back.out(2)"})
  .set('#block',{color:'darkgreen'},'-=0.2')

    const scene2 = this.$scrollmagic
      .scene({
        triggerElement: '.timeline-mainwrap',
        duration: 0,
        triggerHook: 0.8

      })
      .setTween(tmline)
       .addTo(controller)

    this.$scrollmagic.addScene(scene2)
  }

eduardopatrick commented 3 years ago

Same problem here


TypeError: vue_scrollmagic__WEBPACK_IMPORTED_MODULE_1___default.a.Controller is not a constructor
    at VueComponent.mounted (Home.vue?76f2:44)
    at invokeWithErrorHandling (vue.runtime.esm.js?5593:1854)
    at callHook (vue.runtime.esm.js?5593:4219)
    at Object.insert (vue.runtime.esm.js?5593:3139)
    at invokeInsertHook (vue.runtime.esm.js?5593:6346)
    at VueComponent.patch [as __patch__] (vue.runtime.esm.js?5593:6565)
    at VueComponent.Vue._update (vue.runtime.esm.js?5593:3948)
    at VueComponent.updateComponent (vue.runtime.esm.js?5593:4066)
    at Watcher.get (vue.runtime.esm.js?5593:4479)
    at Watcher.run (vue.runtime.esm.js?5593:4554)```

anku598 commented 3 years ago

I am facing the same issue.

eduardopatrick commented 3 years ago

actually I've found a solution @anku598 and @MDALIMULALRAZY, the documentation isn't cleary about it but you have to change a little bit the way you're calling de methods like this :

import $scrollmagic from 'vue-scrollmagic'; ( alredy is your controller)

Vue.use($scrollmagic);

 mounted() {
    const scene = this.$scrollmagic.scene({
      duration: 9000,
      triggerElement: this.$refs.home,
      triggerHook: 0,
    })
      .addIndicators()
      .setPin(this.$refs.home);

    this.$scrollmagic.addScene(scene); ( here you can use it )

    scene.on('update', (e) => {
      this.scrollpos = e.scrollPos / 1000;
    });
    this.checkScroll();
  },
  beforeDestroy() {
    this.$scrollmagic.destroy();
    this.scene = null;
    this.scenes = null;
  },

magr0s / vue-scrollmagic

controller error nuxt js? #17