puppeteer (alpha)
puppeteer is a scroll aware, mobile first, animation library for creating presentation websites. It is currently work in progress and not ready for production.
Download
Get started

Getting Started

Puppeteer is a scroll aware animation library for creating websites. It was created for personal use by myself. Getting started with puppeteer is fairly simple - you just need to reference the JavaScript file (which uses ES5 for compatibility) and annotate your html elements with special attributes, such as p-animation.

Puppeteer needs the web-animations polyfill, because currently IE/Edge and Safari do not support the object.animate() method. Even so, the polyfill doesn't support filter animations such as blur or colorize. Check it out here.


Basic Examples

The simplest way to use it would be something like this:

And it looks like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean viverra, dolor nec molestie molestie, mauris nisl pretium lorem, a condimentum diam orci ac arcu. Quisque vitae felis et arcu bibendum finibus in non eros. Phasellus diam mauris, mattis nec faucibus id, auctor a lectus. Praesent rhoncus ornare nunc, sit amet mollis lorem placerat vitae. Pellentesque tristique varius tellus, ut aliquet enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis eget dolor suscipit, congue quam sed, consectetur diam.

Turns out, we can customize our animation.

Which looks like this:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean viverra, dolor nec molestie molestie, mauris nisl pretium lorem, a condimentum diam orci ac arcu. Quisque vitae felis et arcu bibendum finibus in non eros. Phasellus diam mauris, mattis nec faucibus id, auctor a lectus. Praesent rhoncus ornare nunc, sit amet mollis lorem placerat vitae. Pellentesque tristique varius tellus, ut aliquet enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis eget dolor suscipit, congue quam sed, consectetur diam.

Animation Library

Click on the polaroids to see a demo of the animation.

rotate

p-param indicates the number of degrees to rotate. Negative values are supported.

colorize

p-param indicates the amount of pixels to slide.

blur

p-param indicates the amount of pixels to use for the gaussian blur filter.

horizontal

p-param indicates the amount of pixels to slide horizontally. Negative values are supported.

vertical

p-param indicates the amount of pixels to slide vertically. Negative values are supported.

scale

p-param indicates the starting ratio, 0 means a dot 1 is 100%. Values greater than one are supported.

fade

p-param indicates the starting opacity, must be between 0 means and 1.

You can call an animation programatically like this:


Groups

Normally, an animation will be triggered the moment an element enters the viewport but it's possible to combine multiple animations using groups. If it wasn't for groups, the animations of individual elements would load one by one, as they enter the page, but that's not what we might want in some cases. If we have a panel, like the one above, we might want the animations to start all at once, the moment the panel (not the elements) enter the screen.

Hello There


At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti.

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti.


That's as simple as putting a p-group attribute on an HTML element wraping the group.


Under The Hood

On DOMContentLoaded browser event, Puppeteer querries the DOM and builds a collection of groups and elements. Puppeteer also reacts to the browser scroll event and checks whether a particular element or group has just entered the viewport, and if so, it looks at the p-animation attribute of that element (it does this for each element in the case of a group), and attempts to call a method in the puppeteer.animations namespace with the animation name.

Here's what the rotate animation looks like:

As you can see, the handling of the additional parameters such as p-duration and p-delay is the responsibility of the animation handler, and they can be optional. This approach also makes it extremely simple to extend puppeteer with your own custom animations, in which case you can add whatever attributes you need to the element.

Keep in mind that puppeteer converts kebab case animation name strings to camel case. For example, when encountering an element with p-animation="my-animation", puppeteer will attempt to call puppeteer.animations.myAnimation(element).