Vue Smooth Reveal Plug-In

Vue.js plug-in inspired by scrollreveal/scrollreveal.

Legacy

For usage with Vue.js v2, use this packages v1.1.0 (you can find the docs here).

Usage

import { createApp } from 'vue'
import { SmoothReveal } from 'vue-smooth-reveal'

createApp({ /* ... */ })
  .use(new SmoothReveal(), {
    threshold: .5,
    offset: {
      top: 0,
      right: 0,
      bottom: 0,
      left: 0
    },
    distances: [30, 60],
    delays: [100, 350],
    duration: 600,
    easing: 'cubic-bezier(0.5, 0, 0, 1)'
  })
  .mount('#app')

<template>
    <div v-smooth-reveal="'r1a'"></div>
</template>

The binding value consists of [direction][distance][delay]. The example above, v-smooth-reveal="'r1a'", reveals an element from the right, a distance 1 of 30px and a delay a of 100ms.

Options

You can define all options shown below. The snippet above also shows the default values. You can add up to 26 different distances and delays. They will respectively be referenced using 1-26 and a-z.

Name	Type	Default	Description
`threshold`	Number	`0.5`	How much of the element must be in the viewport before the element is revealed. This corresponds to the `threshold` option of the `IntersectionObserver`.
`offset`	Object	`{top: 0, right: 0, bottom: 0, left: 0}`	Offset values corresponding to the `rootMargin` options of the `IntersectionObserver`.
`distances`	Number[]	`[30, 60]`	Distances in pixels. Each distance is mapped to an index starting at `1`.
`delays`	Number[]	`[100, 350]`	Delays in milliseconds. Each delay is mapped to a letter starting at `a`.
`duration`	Number	`600`	Duration of the animations in milliseconds.
`easing`	String	`cubic-bezier(0.5, 0, 0, 1)`	CSS animation easing.

Conditionally Reveal

Pass an array as the directive value to decide if the smooth reveal should be applied. If the value is false, the element will not be handled. You must add the 'revealed' class or styles yourself, if the element should still be visible:

<div v-smooth-reveal="['r1a', !someCondition]"></div>

Custom Revelation Event

If you use the wait modifier, the plug-in will wait for the smooth-reveal-ready event to be emitted on the specified base (using the css class .smooth-reveal-base) before revealing, even if it is already in the viewport.

<template>
    <div class="smooth-reveal-base">
        <div v-smooth-reveal.wait="'r1a'"></div>
    </div>
</template>

ImagesLoaded

The plug-in will automatically wait for all contained images to be loaded before revealing, even if it is already in the viewport. If you want to reveal an element once one of its parent's contained images load, add the .smooth-reveal-base class and use the following modifiers:

<template>
    <div class="smooth-reveal-base">
        <div v-smooth-reveal.parent="'r1a'">
            <img src="/image.jpg" alt="the div will only reveal once this image is loaded">
        </div>

        <img src="/image.jpg" alt="the div will only reveal once this image is loaded">
    </div>
</template>

Initial state

In order to hide all elements that will be revealed later, add the following to your stylesheet: These classes will be added automatically.

.smooth-reveal-hidden {
    visibility: hidden;

    &.revealed {
        visibility: visible;
    }
}

barthy-koeln/vue-smooth-reveal