Vue-scrollmagic NPM

Vue Scrollmagic

ScrollMagic plugin for Vue.js

Install

NPM

npm i vue-scrollmagic --save

Usage

mount with global

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

mount with nuxt.js/ssr

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

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

Once installed, the plugin add $scrollmagic to Vue.prototype and create global controller, to make him easily accessibles in every components.

Documentation

See ScrollMagic API and Example

Configure controller

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

NOTE: Container is always a window.

Set custom scollTo handle

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

Set custom scrollTo handle with GSAP animation

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

Methods

Name	Description
attachTo	Create scrollmagic controller to custom element. After creating the controller, you have access to your own Scrollmagic.Controller methods.
scene	A Scene defines where the controller should react and how.
addScene	Add one ore more scene(s) to the controller.
destroy	Destroy the controller, all scenes and everything.
removeScene	Remove one ore more scene(s) from the controller.
scrollTo	Scroll to a numeric scroll offset, a DOM element, the start of a scene or provide an alternate method for	scrolling.
update	Updates the controller params and calls updateScene on every scene, that is attached to the controller.
updateScene	Update one ore more scene(s) according to the scroll position of the container.
enabled	Get or Set the current enabled state of the controller.
loglevel	Get or Set the current loglevel option value.
scrollPos	Get the current scrollPosition or Set a new method to calculate it. When used as a setter this method prodes a	way to permanently overwrite the controller's scroll position calculation.
info	Get all infos or one in particular

NOTE: In package adds plugins 'gsap.animation' and 'debug.addIndicators'

Example

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)
}