vue-smooth-reveal v1.1.0
Vue Smooth Reveal Plug-In
Vue.js plug-in inspired by scrollreveal/scrollreveal.
Usage
import Vue from 'vue'
import { VueSmoothReveal } from 'vue-smooth-reveal'
Vue.use(VueSmoothReveal, {
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)'
})<template>
<div class="sr-hidden"
v-smooth-reveal:r1a
></div>
</template>The binding argument 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
Use the directive value to decide if the smooth reveal should be applied. If the value is false, the element will not be handled and you must add the 'revealed' class or styles yourself, if the element should still be visible:
<div class="sr-hidden"
:class="{'revealed': someCondition}"
v-smooth-reveal:r1a="!someCondition"
></div>Custom Revelation Event
If you use the wait modifier, the plug-in will wait for the sr-ready event to be emitted on the specified base (using the css class .sr-base) before revealing, even if it is already in the viewport.
<template>
<div class="sr-base">
<div class="sr-hidden"
v-smooth-reveal:r1a.wait
>
</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 .sr-base class and use the following modifiers:
<template>
<div class="sr-base">
<div class="sr-hidden"
v-smooth-reveal:r1a.parent
>
<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:
.sr-hidden {
visibility: hidden;
&.revealed {
visibility: visible;
}
}