Vue Simple Scroll Trigger

Vue.js plugin for GSAP Scroll Trigger

What are we talking about

We are talking about a Vue component and directive that make Scroll Trigger easy to use without leaving the template section.

How to install

``
npm install vue-simple-scroll-trigger
`

How to use

`js
import App from './App.vue';
import VSimpleScrollTrigger from 'vue-simple-scroll-trigger';
import Vue from 'vue';

Vue.use(VSimpleScrollTrigger);

new Vue({
render: h => h(App),
}).$mount('#app');
`

or without plugin initialization...

`vue



`

or using the directive
(note: if you dont install the plugin you ll need to import the directive and bind it to your component)

`vue


`




$3

Since this component is simply a wrapper of Scroll Trigger i would suggest you to take a look at the official documentation (https://greensock.com/docs/v3/Plugins/ScrollTrigger) by gsap


- ### start
- type: String,
- default: top 90%
- ### end
- type: String,
- default: top 20%
- ### toggleClass
- type: String,
- default: null
- ### onEnter

for both originals 'onEnter' 'onEnterBack' callbacks


- type: Function,
- default: null
- ### onLeave

for both originals 'onLeave' 'onLeaveBack' callbacks

- type: Function,
- default: null`
- ### scroller
- default: document.body

License

MIT @ Davide Turrini (davide-turrini)

(Please note: This is my second try to publish something on npm! Any kind of feedback or contribution is more than welcome)