import VueScrollmagic from 'vue-scrollmagic'
Vue.use(VueScrollmagic)

// plugins/vue-scrollmagic.js
import VueScrollmagic from 'vue-scrollmagic'
Vue.use(VueScrollmagic)

// nuxt.config.js
{
  ...
  plugins: [{
    src: '~plugins/vue-scrollmagic.js',
    ssr: false
  }]
  ...
}

Vue.use(VueScrollmagic, {
  vertical: true,
  globalSceneOptions: {},
  loglevel: 2,
  refreshInterval: 100
})

// src/main.js
...
this.$scrollmagic.handleScrollTo = function (target) {
  // some code
}
...

import { TweenMax } from 'gsap'
import 'ScrollToPlugin'
...
this.$scrollmagic.handleScrollTo = function (target) {
  TweenMax.to(window, 1.5, {
    scrollTo: {
      y: target,
      autoKill: false
    }
  })
}
...

mounted() {
  // Declare Scene
  const scene2 = this.$scrollmagic.scene({
    // ID of element where animation starts
    triggerElement: '#trigger2',

    // {0,0.5,1} - animations starts from {top,center,end} of window
    triggerHook: 0.5,

    // Duration of animation
    duration: 300
  })
    // Declaration of animation and attaching to element
    .setTween('#animate2', { 
      css: { 
        borderTop: '30px solid white', 
        backgroundColor: 'blue',
        scale: 0.7 // the tween durtion can be omitted and defaults to 1
      }
    })
    // Helpful tags for orientation on the screen
    .addIndicators({ name: '2 (duration: 300)' })

  // Add Scene to controller
  this.$scrollmagic.addScene(scene2)

  const scene3 = this.$scrollmagic.scene({
    triggerElement: '#box-inner', // set trigger on inner element
    triggerHook: 0,
    duration: '100%'
  })
    .setTween(
      // Declaration of animation and attaching to element
    )
    .addIndicators()

  // Attaching scrollmagic controller to element
  this.$scrollmagic.attachTo(this.$refs.scrollBox)

  // Add scene to element scrollmagic controller
  this.$refs.scrollBox.$scrollmagic.addScene(scene3)
}