inview-observer.js v1.1.0

inview-observer.js plugin

This plugin is created to add simple inview animations to your website. It uses IntersectionObserver and simple CSS to create elegant inview animations.

Plugin usage

Installation

Install package via NPM

npm i inview-observer.js --save

Example HTML

<div class="js-inview-element" data-inview-delay="500"></div>

Example SCSS

.js-inview-element {
    transition .5s cubic-bezier(.83, 0, .17, 1);
	transition-property: opacity, transform;
	opacity: 0;
}

.js-inview-element.is-inview {
    opacity: 1;
    transform: translate(0, 0)
}

Initialize plugin

import InviewObserver from 'inview-observer.js';

document.addEventListener('DOMContentLoaded', () => {
    const inviewObserver = InviewObserver();

    inviewObserver.init();
});

Options

You can overwrite the default options:

inviewObserver.init({
    element: '.js-inview-element',
    observerOptions: {
		rootMargin: '100px 0px',
		threshold: 0.75
    },
    data: {
        delay: 'data-inview-delay'
    },
    classes: {
        inview: 'is-inview'
    },
});

Events

We have added an event that you can dispatch if you want to reinit the IntersectionObserver. Especially handy if you have async elements.

Example

const reInitInview = new Event('inview-reinit');

window.dispatchEvent(reInitInview);