Performance is essential, so that's why you have to aim for less than 16.7ms(1000ms/60f), because in 16.7ms the browsers job and your work must be completed in each frame.
Use [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) to sync your changes
- You can try to reuse memory to avoid jank when the garbage collector pass
Jank animation can be caused by loading too much information, for instance:
- **JavaScript**
- **Styles** that considers which style apply to which element
- **Layout** that calculates the geometry of the pages (example: recalculating the width and height of a page)
- **Painting**, normally when layout is triggered we must repaint. Repainting an element every time it animates
- **Compositing** that consists on placing the pages together at the end
In order to improve performance we must remove the causes above, that are more costly: layout and painting.
The best way to remove layout and painting is to use [`transform`](https://developer.mozilla.org/en-US/docs/Web/CSS/transform) and [`opacity`](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity)
Removing layout can be done using transform:
```js
// bad
// this will trigger the layout to recalculate everything and repaint it again
box.style.left = `${x * 100}px`;
// good
// this way its possible to lose the layout
box.style.transform = `translateX(${x * 100}px)`;
```
It is possible to remove painting by adding a layer:
```css
/* this will take care of the painting by creating a layer and transform it*/
#box {
width: 100px;
height: 100px;
....
will-change: transform;
}
```
By creating a new layer you can remove painting, but "there is always a tradeoff". If we add to much layers it will increase the **composition** and **update tree**. In conclusion you must promote a new layer only if you now you are going to use it. Performance is the key to a good animation. "Performance is the art of avoiding work".
