Skip to content

tsharms/inview-observer.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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'
    },
});
Option Type Default Description
element String .js-inview-element Element that needs to be animated when inview.
observerOptions Object {rootMargin: '0px 0px', threshold: 0.5} IntersectionObserver options
data Object {delay: 'data-inview-delay'} Data attribute containing the delay of the inview class
classes Object {inview: 'is-inview'} Class that is added when element 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);

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Packages

No packages published