Scrollmagic plugin for Vue.js
npm install vue-scrollmagic
npm i vue-scrollmagic --save
`
Usage
#### mount with global
`js
import VueScrollmagic from 'vue-scrollmagic'
Vue.use(VueScrollmagic)
`
#### mount with nuxt.js/ssr
`js
// 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
`js
Vue.use(VueScrollmagic, {
verical: true,
globalSceneOptions: {},
loglevel: 2,
refreshInterval: 100
})
`
__NOTE__: Container is always a window.
#### Set custom scollTo handle
`js
// src/main.js
...
this.$scrollmagic.handleScrollTo = function (target) {
// some code
}
...
`
#### Set custom scrollTo handle with GSAP animation
`js
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
`js
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)
}
`
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
``