Vue Scrollmagic !Current version

!Vue.js version
!Vue.js version
!License

ScrollMagic plugin for Vue.js

* Install
* Usage
* Documentation
* Example
* Development
* Autor
* License

Install

#### NPM
``
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|
|- | - |
|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)
}
`

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