vue-apparate v0.5.0

Vue-Apparate

A high-performance, scroll-to-appear library custom made for Vue.js

Install

$ npm install --save vue-apparate

Setup

import Vue from 'vue'
require('vue-apparate')

VueApparate.init(Vue)

or...

<script src="/link/to/vue-apparate.min.js"></script>

<script>
var Vue = new Vue({});
VueApparate.init(Vue)
</script>

Usage

Usage is super simple. VueApparate creates a custom directive within Vue:

v-apparate:className="{options: options}"

There is only one necessary part of the directive, the binding arg:

v-apparate:arg

You can additionally pass three options through the directive value:

v-apparate:arg="{y: Number, delay: Number, appendApparateClass: Boolean}"

How it Works

VueApparate adds a custom directive to Vue that adds an inserted hook to a component. When the component is inserted into it's parent, VueApparate begins listening for that element to scroll into view and appends the class 'apparate' to the root element of the component (all that class does is reduce opacity to 0). When the component scrolls into view, the class defined in the binding arg is appended to className of the root element of the component.

The two options available are y and delay. y is the amount of pixels above the bottom of the visible window the element should be before getting the className appended (defaults to 0), delay adds a delay between the y value being reached and the className being appended (defaults to 0).

Example

I'll use a single file template for clarity in this example:

<template>
<main>
	<header>
		<!-- some header content here -->
	</header>
	<section>
		<custom-component v-apparate:fade-in-up="{y:300}" />
	</section>
</main>
</template>

<script>
import CustomComponent from './custom-component.vue'

export default {
	name: 'App',
	components: {
		CustomComponent
	}
}
</script>

.apparate {
	opacity: 0;
}

@keyframes fadeInUp {
	from {
		transform: translateY(100px);
		opacity: 0;
	}

	to {
		transform: none;
		opacity: 1;
	}
}

.fade-in-up {
	animation-name: fadeInUp;
	animation-duration: .7s;
	animation-fill-mode: forwards;
}

With this, once CustomComponent is 300px above the bottom of the visible window, it'll fade into view while sliding upwards over .7s.

Compatibility

Tested and working on:

• Chrome
• Firefox
• IE > 8
• iOS > 8 (Chrome and Safari)

Performance

VueApparate does NOT use a scroll listener. Instead, an interval is set that checks current scroll position.

Additionally, the array of elements to be animated is checked every 100ms to see if it's empty. If it is, the interval is turned off to prevent unecessary load.

Furthermore, when the list of elements to be animated is built, it is sorted based on y values. When the list is iterated through, iteration ends once the first element outside the visible range is hit. This means, if you have an array of elements 50 items long, and none are ready to be animated, the iteration only runs one cycle before ending, rather than pointlessly iterating through 50 array items.

Finally, once an element is animated, it is removed from the array, preventing unnecessary iterations.

Testing

To test that VueApparate is working, clone this repo to your computer. cd into ./test and run npm install. Once all packages are installed, run npm run dev to boot up the server. Once it's booted, in a separate terminal window run npm run test. CasperJS is used to scrape the page and determine whether or not the proper classes have been applied.

Thanks

To: mathiasbynens, lodash