minor

Author: iliakan

7-animation/3-js-animation/1-animate-ball/solution.md

@@ -1,10 +1,8 @@
 To bounce we can use CSS property `top` and `position:absolute` for the ball inside the field with `position:relative`.
 
-The bottom coordinate of the field is `field.clientHeight`. But the `top` property gives coordinates for the top of the ball, the edge position is `field.clientHeight - ball.clientHeight`.
+The bottom coordinate of the field is `field.clientHeight`. The CSS `top` property refers to the upper edge of the ball. So it should go from `0` till `field.clientHeight - ball.clientHeight`, that's the final lowest position of the upper edge of the ball.
 
-So we animate the `top` from `0` to `field.clientHeight - ball.clientHeight`.
-
-Now to get the "bouncing" effect we can use the timing function `bounce` in `easeOut` mode.
+To to get the "bouncing" effect we can use the timing function `bounce` in `easeOut` mode.
 
 Here's the final code for the animation:
 

7-animation/3-js-animation/article.md

@@ -75,7 +75,7 @@ setInterval(animate2, 20); // in different places of the script
 setInterval(animate3, 20);
 ```
 
-These several independent redraws should be grouped together, to make the redraw easier for the browser (and hence smoother for people).
+These several independent redraws should be grouped together, to make the redraw easier for the browser and hence load less CPU load and look smoother.
 
 There's one more thing to keep in mind. Sometimes when CPU is overloaded, or there are other reasons to redraw less often (like when the browser tab is hidden), so we really shouldn't run it every `20ms`.