Peekaboo

About

Peekaboo is a minimal 2k library for viewport animations.

Peekaboo uses IntersectionObserver to check data-peekaboo items and adds a .peekabooed class if they are visible. For browsers without support it relies on requestAnimationFrame.

Peekaboo only works in one direction, with animated items being removed from the observer.

Install

// With npm
npm install peekaboo-anim

// With yarn
yarn add peekaboo-anim

Or you can download the latest version or checkout all the releases here.

Usage

Add the markup

Setup the items to observe with the data-peekaboo attribute.

<div data-peekaboo></div>

Import Peekaboo

// ES6 modules
import Peekaboo from 'peekaboo-anim';

// CommonJS modules
const Peekaboo = require('Peekaboo');

Initialize Peekaboo

const peekaboo = new Peekaboo();

Animations

By default peekaboo doesn't provide any animations, so to animate you have to extend the .peekabooed class to animate visible items.

Since Peekaboo relies on CSS for the animations you can work with attribute values or with CSS classes.

<div data-peekaboo="fadeIn"></div>
<div data-peekaboo class="fade-in"></div>

Options

Markup Options

data-peekaboo-delay

A number in ms to delay the observer's callback. Relies on setTimeout for the delay.

<div data-peekaboo data-peekaboo-delay="500"></div>

If you prefer you can set delays with CSS.

JS Options

const peekaboo = new Peekaboo({
      root: null,
      threshold: 0.25,
      finishedClass: 'peekabooed'
});

root

Same as IntersectionObserver.root.

The element that is used as the viewport for checking visibility of the target. Must be the ancestor of the target. Defaults to the browser viewport if not specified or if null.

threshold

Based on IntersectionObserver.thresholds.

A single number which indicates at what percentage of the target's visibility the observer's callback should be executed.

finishedClass

The CSS class to add to the target after it becomes visible.