rtorr / anim-event

Event Manager for Animation

AnimEvent

Super Simple Event Manager for Animation

Some DOM events (e.g. scroll, resize, mousemove, drag, etc.) are fired too frequently.
The listening to those events for animation is performance degradation.
AnimEvent controls timing of calling event listeners with requestAnimationFrame (or 60fps in a web browser that doesn't support it).

AnimEvent works like lodash's throttle function, but it uses requestAnimationFrame that is more optimized for animation, instead of "wait-time".

Example: Open a file test/test.html by web browser.

Usage

Load AnimEvent into your web page.

<script src="anim-event.min.js"></script>

To register your event listener, pass AnimEvent.add(listener) instead of listener to addEventListener method.

For example, replace first code with second code:

window.addEventListener('scroll', listener, false);

window.addEventListener('scroll', AnimEvent.add(listener), false);

Then listener is called when the window is scrolled, with optimized timing for animation. Superfluous fired events are ignored.

Methods

AnimEvent.add

wrappedListener = AnimEvent.add(listener)

Add an event listener that is controlled by AnimEvent.
Pass a returned wrappedListener to addEventListener method.

A listener that has already been added can not be added.
For example, use one listener for multiple events:

var listener = AnimEvent.add(function(event) { console.log(event); });
window.addEventListener('scroll', listener, false);
window.addEventListener('resize', listener, false);

AnimEvent.remove

AnimEvent.remove(listener)

Remove an event listener that was added by AnimEvent.add method.
You can remove a wrappedListener that was added by addEventListener method from the event by removeEventListener method. AnimEvent.remove method removes a listener from listeners that are controlled by AnimEvent.