Need private packages and team management tools?Check out npm Teams »

insicht

0.6.0 • Public • Published

InSicht

Viewport animation using IntersectionObserver.

Make sure to add a polyfill if needed. Check caniuse for more info on support.

Install

With Bower

bower install insicht

With NPM

npm install insicht

Example Setup

Javascript

import InSicht from 'insicht';
 
// create an instance with default options
const insicht = new InSicht({
  container: document.documentElement,
  selector: '.insicht',
  visibleClass: 'sichtbar',
  stagger: 100,
  threshold: 0,
  autoRefresh: false,
  autoReset: false,
  init: (item, instance) => {},
  done: (item, instance) => {},
});

There are 2 callback functions, init and done. init is run when an item is added and done is run when an item enters the viewport. They both receive 2 arguments, the item and the InSicht instance.

Functions

If you don't have autoRefresh enabled, you can manually refresh the items array, might be useful for ajax websites:

insicht.refresh();

Or you can reset the classes on all items:

insicht.reset();

If you don't need it anymore, you can dispose of it properly:

insicht.destroy();
delete insicht;

CSS

You can overwrite the class that InSicht adds to visible elements, but using the default, it could look something like this:

.selector {
  opacity: 0;
  transition: 0.3s ease-out;
}
.selector.sichtbar {
  opacity: 1;
}

HTML

You can add custom values for staggering individual elements:

<div class="insicht" data-stagger="200"></div>

License

MIT License

Install

npm i insicht

DownloadsWeekly Downloads

2

Version

0.6.0

License

MIT

Unpacked Size

25.2 kB

Total Files

11

Last publish

Collaborators

  • avatar