@wide/viewport

2.2.0 • Public • Published

Viewport

Handle intersection between elements and the viewport.

Install

npm install @wide/viewport --save

Usage

Observe [data-viewport] elements:

import '@wide/viewport'
<div data-viewport></div>

These elements will triggers 2 events when they appear in the viewport and when they leave :

// use `e.detail` to get information about the scroll direction or the
// appearance edge of the element (e.g: { edge: 'top', scroll: 'up' })
div.addEventListener('viewport.enter', e => {})
div.addEventListener('viewport.leave', e => {})

Aside from these events, they will received 4 css classes:

  • .viewport on page loading, this is the default state
  • .viewport-enter when the element is entering the viewport
  • .viewport-active once the entering animation or transition is finished
  • .viewport-leave when the element has left the viewport

Custom CSS classes

You can replace the state class name with your own:

<div data-viewport="fade"></div>

This element will now received these 4 css classes:

  • .fade
  • .fade-enter
  • .fade-active
  • .fade-leave

Exemple of an appearance transition:

<div class="foo" data-viewport.once="fade"></div>
.fade {
  opacity: 0;
  transform: translateY(80px);
  transition: all 300ms;
  &-enter,
  &-active {
    opacity: 1;
    transform: translateY(0);
  }
}

Observe once only

You can set an option to unlisten after entering the viewport once:

<div data-viewport.once></div>

Methods

Observe programmaticaly an element in the viewport:

import viewport from '@wide/viewport'

const el = document.querySelector('.something')
viewport(el, {
  enter(el) {},
  leave(el) {},
  once: false,
  name: 'fade'
})

Authors

License

This project is licensed under the MIT License - see the licence file for details

Readme

Keywords

none

Package Sidebar

Install

npm i @wide/viewport

Weekly Downloads

7

Version

2.2.0

License

MIT

Unpacked Size

16.2 kB

Total Files

7

Last publish

Collaborators

  • gflandin
  • myeti
  • jmartinsdacosta
  • robiseb