- It is very hard to predict performances in JS. So measure performances,
to know if your code is fast. This will be tested
### Instructions
Animation must have consistent motion, so in order to have a smooth animation (without interruptions or better named: jank animation) you must achieve a special number, [**60fps**](https://blog.algolia.com/performant-web-animations/).
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.
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)
// 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".
Your game will have to respect the genre of one of these games listed below. In other words, the main goal of the game has to be similar to one of these:
The one tool that most will help you is the Performance Tool. There you can record a sample of your actions on the site and analyze the FPS, check for frame drops, how many time is your functions taking to execute, amongst other useful stuff.
In the developer tools you can also find a Paint Flashing option that will highlight every paint that happens in your page as you perform actions in it.