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.

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
import RequestAnimationFrameEvent from '@typo3/core/event/request-animation-frame-event.js';

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