Under the hood while animation
Modern web browsers heavily optimize animations and transitions by using hardware acceleration. This means that animations and transitions are often delegated to the GPU (Graphics Processing Unit) for smoother rendering.
Concern
You should avoid using transitions with the left
/top
/right
/bottom
properties. it can result in flickering/slow or janky animations.
Those don’t create a fluid animation because they have the browser creating layouts each time, which will affect all of their children. it often triggers a "reflow" and a "repaint" of the entire page. Also, they aren't always hardware-accelerated, leading to slower and less smooth animations.
Solution
Use CSS transitions and animations with properties like transform
and opacity
when you animate as they have no impact on the flow and are much smoother. They are hardware-accelerated in most cases.
Pro-tip : will-change
The will-change
CSS property is used to provide a hint to the browser about which properties are likely to change and be animated in the future. This hint allows the browser to optimize the rendering of these properties, resulting in better animation performance.
In many cases, when you apply will-change
to an element, the browser will promote that element to its own GPU-accelerated layer. This means that the element and the specified property are rendered separately from the rest of the page, which can improve rendering performance.
Warning: will-change
is intended to be used as a last resort, in order to try to deal with existing performance problems. It should not be used to anticipate performance problems.
.on()
method. If not - what is $$?top
appears to be in the list, which eliminates my doubt abouttop
not being available for transitions.top
value set (to 0 for instance) before you change it (to 200 or whatever)