A JavaScript helper for viewport based CSS animations


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.

With that, you can do all the animations you want, controlling them with CSS.


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

You can delay setting the visible class with the data-peekaboo-delay attribute. Or if you prefer you can set delays in the CSS.


npm install peekaboo-anim

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

Once you have downloaded Peekaboo you need to include the JavaScript.

// ES6 modules
import Peekaboo from 'peekaboo-anim';
// CommonJS modules
var Peekaboo = require('Peekaboo');


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

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

Then initialize Peekaboo.

var peekaboo = new Peekaboo();


var peekaboo = new Peekaboo({
      root: null, //defaults to document
      threshold: 0.25,  //the percentage visible to trigger the finishedClass
      finishedClass: 'peekabooed'


MIT © 2018 Ana Vicente