Attention
TYPO3 v10 has reached end-of-life as of April 30th 2023 and is no longer being maintained. Use the version switcher on the top left of this page to select documentation for a supported version of TYPO3.
Need more time before upgrading? You can purchase Extended Long Term Support (ELTS) for TYPO3 v10 here: TYPO3 ELTS.
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.
Important
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 oncallback
(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);