Vue Scrollmagic

ScrollMagic plugin for Vue.js

• Install
• Usage
• Documentation
• Example
• Development
• Autor
• License

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

Development

Compiles and hot-reloads

npm run serve

Compiles and minifies demo

npm run build:demo

Compiles and minifies library

npm run build:lib

Lints and fixes files

npm run lint

Author

magr0s

License

MIT