components

7-animation/3-js-animation/2-animate-ball-hops/solution.md

@@ -0,0 +1,32 @@
+In the task <info:task/animate-ball> we had only one property to animate. Now we need one more: `elem.style.left`.
+
+The horizontal coordinate changes by another law: it does not "bounce", but gradually increases shifting the ball to the right.
+
+We can write one more `animate` for it.
+
+As the time function we could use `linear`, but something like `makeEaseOut(quad)` looks much better.
+
+The code:
+
+```js
+let height = field.clientHeight - ball.clientHeight;
+let width = 100;
+
+// animate top (bouncing)
+animate({
+  duration: 2000,
+  timing: makeEaseOut(bounce),
+  draw: function(progress) {
+    ball.style.top = height * progress + 'px'
+  }
+});
+
+// animate left (moving to the right)
+animate({
+  duration: 2000,
+  timing: makeEaseOut(quad),
+  draw: function(progress) {
+    ball.style.left = width * progress + "px"
+  }
+});
+```