Event Manager for Animation


1701.0.175 months ago5 years agoMinified + gzip package size for anim-event in KB



npm GitHub issues dependencies license

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.


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.



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);



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.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from