The right way to change element style on an event
Listen to event
Move the element
Before the rAf (request animation frame) you’d need to put moving logics of the element into the mousemove event.
If we take a look at FPS when moving the element, we won’t be very pleased for such a simple operation.
Request Animation Frame
By using rAF we will avoid changing the element position in cases when such is not necessary.Essentially when the browser isn’t able to do so.
Now we can see how rAF has improved FPS.
The end result with additional improvements such as: better logics of moving, forces the browser to use 3D transform and resize handler.
It’s understandable that rAF has improved FPS but we’ve also separated logics for collecting data about current mouse position and the very moving of elements which will be usable when developing bigger and more complex websites.
That’s it. That’s the right way to change the element style.