Vue-simple-scroll-trigger NPM

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

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...

<template>
  <v-simple-scroll-trigger/>
</template>

<script>
import VSimpleScrollTrigger from 'vue-simple-scroll-trigger';

export default { 
  components: {
    VSimpleScrollTrigger
  }
}
</script>

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

<template>
  <div v-simple-scroll-trigger="{ start, end, toggleClass, onEnter, onLeave, scroller }"></div>
</template>

<script>
import { SimpleScrollTriggerDirective } from 'vue-simple-scroll-trigger';

export default { 
    directives: {
      'simple-scroll-trigger': SimpleScrollTriggerDirective
    }
}
</script>

Props

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