Using this with Gridsome

Berkmann18 commented 4 years ago

I'm not sure if this supports Gridsome or if I just set it improperly but I'm getting the following error in the devtools when running gridsome develop:

(ScrollMagic.Controller) -> ERROR: invalid argument supplied for '.addScene()'

Here's the relevant code: Products.vue

export default {
  //...
  methods: {
    animate() {
      const productHeight = parseFloat(
        getComputedStyle(document.getElementById('products')).height
      );

      const stackImgs = ['/stack.png'];
      this.products.forEach(prod => stackImgs.push(`/stack-${prod.name.toLowerCase()}.png`));

      const leftScene = this.$scrollmagic
        .Scene({
          triggerElement: '#products',
          duration: 0.767918 * productHeight
        })
        .setPin('#prodMenu');
      this.$ksvuescr.$emit('addScene', 'animate', leftScene);

      const btnScenes = this.extProducts.map(prod => {
        const scene = this.$scrollmagic
          .Scene({
            triggerElement: `#${prod.name}`,
            duration: 100
          })
          .setClassToggle(`#${prod.name}_btn`, 'v-list-item--active');
        this.$ksvuescr.$emit('addScene', 'animate', scene);
        return scene;
      });

      const rightHandHeight = 0.59727 * productHeight;
      const rightScene = this.$scrollmagic
        .Scene({
          triggerElement: '#products',
          duration: rightHandHeight
        })
        .setPin('#stackLayer');
      this.$ksvuescr.$emit('addScene', 'animate', rightScene);

      const lastStackImgIndex = stackImgs.length - 1;
      const stackScene = this.$scrollmagic
        .Scene({
          triggerElement: '#products',
          duration: rightHandHeight
        })
        .on('progress', e => {
          let current = Math.round(e.progress * lastStackImgIndex);
          document.getElementById('stackImg').setAttribute('src', stackImgs[current]);
        });
      this.$ksvuescr.$emit('addScene', 'animate', stackScene);
    }
  },
  },
  mounted() {
    this.$nextTick(this.animate)
  },
}

Also, I'm getting a ReferenceError: window is not defined error when trying gridsome build the site and I was wondering how I could go about it with this package.

ukristen commented 4 years ago

I have the same issue with ReferenceError: window is not defined. Did you ever figure out what causes it?

Berkmann18 commented 4 years ago

@ukristen I did, and the solution was not using this particular library or vue-scrollmagic but the vanilla ScrollMagic with:

My code had something like the below, which basically loaded the ScrollMagic library in the <head> then used it in the mounted hook.

<script>
export default {
  name: 'products',
  props: {
    products: {
      type: Array,
      required: true
    }
  },
  computed: {
    extProducts() {
      return [
        {
          name: 'Overview',
          action: 'Overview',
          type: '',
          url: '#Overview',
          image: ''
        },
        ...this.products
      ];
    }
  },
  methods: {
    animate(ScrollMagic) {
      const controller = new ScrollMagic.Controller();

      const productHeight = parseFloat(
        getComputedStyle(document.getElementById('products')).height
      );

      const rightHandHeight = 0.59727 * productHeight;
      const rightScene = new ScrollMagic.Scene({
        triggerElement: '#products',
        duration: rightHandHeight
      })
        .setPin('#stackLayer')
        .addTo(controller);
    }
  },
  metaInfo: {
    script: [
      {
        src: 'https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js',
        async: true,
        defer: true
      }
    ]
  },
  mounted() {
    if (process.isClient) {
      setTimeout(() => this.animate(ScrollMagic), 500);
    }
  }
};
</script>

pirony / ks-vue-scrollmagic

Using this with Gridsome #15