vue-scroll-reveal

A Vue directive to wrap @jlmake's excellent ScrollReveal library.

The directive exposes reset 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 }).

Install

# npm
npm install --save vue-scroll-reveal

# yarn
yarn add vue-scroll-reveal

Use

// In main.js
import VueScrollReveal from 'vue-scroll-reveal';

Vue.use(VueScrollReveal);

// You can also pass in default options
Vue.use(VueScrollReveal, {
  duration: 800,
  scale: 1,
  distance: '10px',
  mobile: false
});

<!-- In a component -->
<template>
  <main>

    <section>
      <h1>Scroll down!</h1>
    </section>

    <section v-scroll-reveal.reset>
      <h1>Tada!</h1>
    </section>

    <section v-scroll-reveal.reset={ delay: 250 }>
      <h1>Slightly late tada!</h1>
    </section>

  </main>
</template>

<style>
  section {
    height: 100vh;
  }
</style>

Methods

As of 1.0.4, the isSupported() and sync() are now 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.

Nuxt

If using as a plugin with Nuxt be sure to disable server side rendering in nuxt.config.js.

module.exports = {
  plugins: [
    { src: '~/plugins/vue-scroll-reveal', ssr: false }
  ],
}