vue-scroll-reveal license
A Vue directive to wrap @jlmakes' excellent ScrollReveal library.
The directive exposes reset, nodesktop, and nomobile as modifiers (ie. v-scroll-reveal.reset.nomobile).
All other options can be passed to Vue.use or to individual elements as a value (ie. v-scroll-reveal={ delay: 250 }).
# npm
npm install --save vue-scroll-reveal# yarn
yarn add vue-scroll-revealRemember! Any of the ScrollReveal options can be used!
// In main.js import VueScrollReveal from 'vue-scroll-reveal'; // Using ScrollReveal's default configuration Vue.use(VueScrollReveal); // OR specifying custom default options for all uses of the directive Vue.use(VueScrollReveal, { class: 'v-scroll-reveal', // A CSS class applied to elements with the v-scroll-reveal directive; useful for animation overrides. duration: 800, scale: 1, distance: '10px', mobile: false });
<!-- In a component --> <template> <main> <section> <h1>Scroll down!</h1> </section> <!-- This section will reveal itself each time it's scrolled into view --> <section v-scroll-reveal.reset> <h1>Tada!</h1> </section> <!-- Element-specific configuration options can be passed like this --> <section v-scroll-reveal.reset="{ delay: 250 }"> <h1>Slightly late tada!</h1> </section> </main> </template> <style> section { height: 100vh; } </style>
As of 1.0.4, the isSupported() and sync() methods are exposed via Vue.$sr or this.$sr.
As of 1.0.7, the reveal(target, config, interval, sync) is exposed via Vue.$sr or this.$sr, though using the directive
is preferred in order to keep with Vue principles.
If using as a plugin with Nuxt, make sure to disable server-side rendering in nuxt.config.js.
module.exports = { plugins: [ { src: '~/plugins/vue-scroll-reveal', ssr: false } ], }
While the code within this component (tserkov/vue-scroll-reveal) is MIT-licensed, ScrollReveal is GPL3-licensed, and requires the purchase of a Commercial License if you want to use it in a closed-source project.
For an explanation of why this component is licensed differently, see #15.