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.