Oct 2, 2020 · Sep 27, 2020 · Sep 27, 2020 · Sep 28, 2020 · Sep 28, 2020 · Sep 28, 2020
diff --git a/7-animation/3-js-animation/1-animate-ball/solution.md b/7-animation/3-js-animation/1-animate-ball/solution.md
 To bounce we can useCSSproperty`top`and `position:absolute`for the ball inside the field with `position:relative`.
 Para rebotar podemos usar la propiedadCSS `top`y `position:absolute`para la pelota dentro del campo con `position:relative`.

 The bottom coordinate of the field is`field.clientHeight`.TheCSS `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.
 La coordenada inferior del campo es`field.clientHeight`.La propiedadCSS `top`se refiere al borde superior de la bola. Por lo tanto, debe ir desde`0`hasta `field.clientHeight - ball.clientHeight`,que es la posición final más baja del borde superior de la pelota.

 To to get the "bouncing" effect we can use the timing function`bounce`in `easeOut` mode.
 Para obtener el efecto de "rebote", podemos usar la función de sincronización`bounce`en el modo `easyOut`.

 Here's the final code for the animation:
 Aquí está el código final de la animación:

 ```js
 let to = field.clientHeight - ball.clientHeight;
diff --git a/7-animation/3-js-animation/1-animate-ball/task.md b/7-animation/3-js-animation/1-animate-ball/task.md

 ---

 #Animate the bouncing ball
 #Animar la pelota que rebota

 Make a bouncing ball. Click to see how it should look:
 Haz una pelota que rebote. Haz clic para ver cómo debería verse:

 [iframe height=250 src="solution"]
diff --git a/7-animation/3-js-animation/2-animate-ball-hops/solution.md b/7-animation/3-js-animation/2-animate-ball-hops/solution.md
 In the task <info:task/animate-ball>we had only one property to animate. Now we need one more: `elem.style.left`.
 En la tarea <info:task/animate-ball>solo teníamos una propiedad para animar. Ahora necesitamos una más: `elem.style.left`.

 Thehorizontalcoordinate changes by another law: it does not "bounce",but gradually increases shifting the ball to the right.
 La coordenadahorizontalcambia por otra ley: no "rebota",sino que aumenta gradualmente desplazando la pelota hacia la derecha.

 We can write one more`animate`for it.
 Podemos escribir una`animate`más para ello.

 As the time function we could use`linear`,but something like `makeEaseOut(quad)`looks much better.
 Como función de tiempo podríamos usar`linear`,pero algo como `makeEaseOut(quad)`se ve mucho mejor.

 The code:
 El código:

 ```js
 let height = field.clientHeight - ball.clientHeight;
 let width = 100;

 // animate top (bouncing)
 // animate top (rebotando)
 animate({
  duration: 2000,
  timing: makeEaseOut(bounce),
  }
 });

 // animate left (moving to the right)
 // animate left (moviéndose a la derecha)
 animate({
  duration: 2000,
  timing: makeEaseOut(quad),
diff --git a/7-animation/3-js-animation/2-animate-ball-hops/task.md b/7-animation/3-js-animation/2-animate-ball-hops/task.md

 ---

 #Animate the ball bouncing to the right
 #Animar la pelota rebotando hacia la derecha

 Make the ball bounce to the right. Like this:
 Haz que la pelota rebote hacia la derecha. Así:

 [iframe height=250 src="solution"]

 Write the animation code. The distance to the left is `100px`.
 Escribe el código de la animación. La distancia a la izquierda es `100px`.

 Take the solution of the previous task <info:task/animate-ball>as the source.
 Toma la solución de la tarea anterior <info:task/animate-ball>como fuente.
Original file line number	Diff line number	Diff line change
		@@ -1,10 +1,10 @@
		To bounce we can useCSSproperty`top`and `position:absolute`for the ball inside the field with `position:relative`.
		Para rebotar podemos usar la propiedadCSS `top`y `position:absolute`para la pelota dentro del campo con `position:relative`.

		The bottom coordinate of the field is`field.clientHeight`.TheCSS `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.
		La coordenada inferior del campo es`field.clientHeight`.La propiedadCSS `top`se refiere al borde superior de la bola. Por lo tanto, debe ir desde`0`hasta `field.clientHeight - ball.clientHeight`,que es la posición final más baja del borde superior de la pelota.

		To to get the "bouncing" effect we can use the timing function`bounce`in `easeOut` mode.
		Para obtener el efecto de "rebote", podemos usar la función de sincronización`bounce`en el modo `easyOut`.

		Here's the final code for the animation:
		Aquí está el código final de la animación:

		```js
		let to = field.clientHeight - ball.clientHeight;
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,8 +2,8 @@ importance: 5

		---

		#Animate the bouncing ball
		#Animar la pelota que rebota

		Make a bouncing ball. Click to see how it should look:
		Haz una pelota que rebote. Haz clic para ver cómo debería verse:

		[iframe height=250 src="solution"]
Original file line number	Diff line number	Diff line change
		@@ -1,18 +1,18 @@
		In the task <info:task/animate-ball>we had only one property to animate. Now we need one more: `elem.style.left`.
		En la tarea <info:task/animate-ball>solo teníamos una propiedad para animar. Ahora necesitamos una más: `elem.style.left`.

		Thehorizontalcoordinate changes by another law: it does not "bounce",but gradually increases shifting the ball to the right.
		La coordenadahorizontalcambia por otra ley: no "rebota",sino que aumenta gradualmente desplazando la pelota hacia la derecha.

		We can write one more`animate`for it.
		Podemos escribir una`animate`más para ello.

		As the time function we could use`linear`,but something like `makeEaseOut(quad)`looks much better.
		Como función de tiempo podríamos usar`linear`,pero algo como `makeEaseOut(quad)`se ve mucho mejor.

		The code:
		El código:

		```js
		let height = field.clientHeight - ball.clientHeight;
		let width = 100;

		// animate top (bouncing)
		// animate top (rebotando)
		animate({
		duration: 2000,
		timing: makeEaseOut(bounce),
Expand All		@@ -21,7 +21,7 @@ animate({
		}
		});

		// animate left (moving to the right)
		// animate left (moviéndose a la derecha)
		animate({
		duration: 2000,
		timing: makeEaseOut(quad),
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,12 +2,12 @@ importance: 5

		---

		#Animate the ball bouncing to the right
		#Animar la pelota rebotando hacia la derecha

		Make the ball bounce to the right. Like this:
		Haz que la pelota rebote hacia la derecha. Así:

		[iframe height=250 src="solution"]

		Write the animation code. The distance to the left is `100px`.
		Escribe el código de la animación. La distancia a la izquierda es `100px`.

		Take the solution of the previous task <info:task/animate-ball>as the source.
		Toma la solución de la tarea anterior <info:task/animate-ball>como fuente.