Fix typos in 7.3 (JavaScript animations)

Author: vsemozhetbyt

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

@@ -2,7 +2,7 @@ To bounce we can use CSS property `top` and `position:absolute` for the ball ins
 
 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.
 
-To to get the "bouncing" effect we can use the timing function `bounce` in `easeOut` mode.
+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

@@ -77,7 +77,7 @@ setInterval(animate3, 20);
 
 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`.
+There's one more thing to keep in mind. Sometimes 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`.
 
 But how do we know about that in JavaScript? There's a specification [Animation timing](http://www.w3.org/TR/animation-timing/) that provides the function `requestAnimationFrame`. It addresses all these issues and even more.
 
@@ -227,7 +227,7 @@ See in action (click to activate):
 
 [iframe height=40 src="quad" link]
 
-...Or the cubic curve or event greater `n`. Increasing the power makes it speed up faster.
+...Or the cubic curve or even greater `n`. Increasing the power makes it speed up faster.
 
 Here's the graph for `progress` in the power `5`:
 
@@ -397,15 +397,15 @@ The effect is clearly seen if we compare the graphs of `easeIn`, `easeOut` and `
 
 ![](circ-ease.svg)
 
-- <span style="color:#EE6B47">Red</span> is the regular variantof `circ` (`easeIn`).
+- <span style="color:#EE6B47">Red</span> is the regular variant of `circ` (`easeIn`).
 - <span style="color:#8DB173">Green</span> -- `easeOut`.
 - <span style="color:#62C0DC">Blue</span> -- `easeInOut`.
 
 As we can see, the graph of the first half of the animation is the scaled down `easeIn`, and the second half is the scaled down `easeOut`. As a result, the animation starts and finishes with the same effect.
 
 ## More interesting "draw"
 
-Instead of moving the element we can do something else. All we need is to write the write the proper `draw`.
+Instead of moving the element we can do something else. All we need is to write the proper `draw`.
 
 Here's the animated "bouncing" text typing: