RequestAnimationFrame event

A "request animation frame event" is similar to using ThrottleEvent with a limit of 16, as this event type incorporates the browser's RequestAnimationFrame API (rAF) which aims to run at 60 fps (\(16 = \frac{1}{60}\)) but decides internally the best timing to schedule the rendering.

The best suited use-case for this event type is on "paint jobs", e.g. calculating the size of an element or move elements around.

Attention

Due to the behavior of rAF, any event listener is not executed if the browser's tab is not active.

To construct the event listener, the module TYPO3/CMS/Core/Event/RequestAnimationFrameEvent must be imported. The constructor accepts the following arguments:

  • eventName (string) - the event to listen on

  • callback (function) - the executed event listener when the event is triggered

const el = document.querySelector('.item');
new RequestAnimationFrameEvent('scroll', function () {
    el.target.style.width = window.scrollY + 100 + 'px';
}).bindTo(window);