From daa1900f5de2a761833b63f5cb377d03bddfe67d Mon Sep 17 00:00:00 2001
From: Samantha Vale <karlasamantha@gmail.com>
Date: Mon, 18 May 2020 20:34:48 -0700
Subject: [PATCH 1/7] translate files to portuguese

---
 .../3-js-animation/1-animate-ball/solution.md |  12 +-
 .../3-js-animation/1-animate-ball/task.md     |   4 +-
 .../2-animate-ball-hops/solution.md           |  20 +-
 .../2-animate-ball-hops/task.md               |   8 +-
 7-animation/3-js-animation/article.md         | 353 +++++++++---------
 .../3-js-animation/text.view/index.html       |  37 +-
 6 files changed, 217 insertions(+), 217 deletions(-)

diff --git a/7-animation/3-js-animation/1-animate-ball/solution.md b/7-animation/3-js-animation/1-animate-ball/solution.md
index 3a9b8564f..24e07d2cc 100644
--- a/7-animation/3-js-animation/1-animate-ball/solution.md
+++ b/7-animation/3-js-animation/1-animate-ball/solution.md
@@ -1,12 +1,12 @@
-To bounce we can use CSS property `top` and `position:absolute` for the ball inside the field with `position:relative`.
+Para quicar, podemos usar a propriedade CSS `top` e `position:absolute` para a bola dentro do campo com `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`.
+A coordenada inferior do campo é `field.clientHeight`. Mas a propriedade `top` fornece coordenadas para o topo da bola, a posição da borda é `field.clientHeight - ball.clientHeight`.
 
-So we animate the `top` from `0` to `field.clientHeight - ball.clientHeight`.
+Então animamos a propriedade `top` a partir de `0` até `field.clientHeight - ball.clientHeight`.
 
-Now to get the "bouncing" effect we can use the timing function `bounce` in `easeOut` mode.
-
-Here's the final code for the animation:
+Para obter o efeito de "quique", podemos usar a função de tempo `bounce` no modo `easeOut`
+.
+Aqui está o código final para a animação:
 
 ```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
index 903e82384..da8f929a5 100644
--- a/7-animation/3-js-animation/1-animate-ball/task.md
+++ b/7-animation/3-js-animation/1-animate-ball/task.md
@@ -2,8 +2,8 @@ importance: 5
 
 ---
 
-# Animate the bouncing ball
+# Animar a bola quicando
 
-Make a bouncing ball. Click to see how it should look:
+Faça uma bola quicando. Clique para ver como deve ficar:
 
 [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
index d47387e30..fd23c0034 100644
--- a/7-animation/3-js-animation/2-animate-ball-hops/solution.md
+++ b/7-animation/3-js-animation/2-animate-ball-hops/solution.md
@@ -1,22 +1,22 @@
-In the task <info:task/animate-ball> we had only one property to animate. Now we need one more: `elem.style.left`.
+Na atividade <info:task/animate-ball> nós tínhamos apenas uma propriedade para animar. Agora precisamos de mais uma: `elem.style.left`.
 
-The horizontal coordinate changes by another law: it does not "bounce", but gradually increases shifting the ball to the right.
+A coordenada horizontal é modificada por outra regra: ela não "quica", mas gradativamente aumenta a movimentação da bola para a direita.
 
-We can write one more `animate` for it.
+Podemos escrever mais um `animate` para isso.
 
-As the time function we could use `linear`, but something like `makeEaseOut(quad)` looks much better.
+Como função the temo podemos usar `liner`, mas algo como `makeEaseOut(quad)` parece bem melhor.
 
-The code:
+O código:
 
 ```js
-let height = field.clientHeight - ball.clientHeight;
-let width = 100;
+let height = field.clientHeight - ball.clientHeight
+let width = 100
 
 // animate top (bouncing)
 animate({
   duration: 2000,
   timing: makeEaseOut(bounce),
-  draw: function(progress) {
+  draw: function (progress) {
     ball.style.top = height * progress + 'px'
   }
 });
@@ -25,8 +25,8 @@ animate({
 animate({
   duration: 2000,
   timing: makeEaseOut(quad),
-  draw: function(progress) {
-    ball.style.left = width * progress + "px"
+  draw: function (progress) {
+    ball.style.left = width * progress + 'px'
   }
 });
 ```
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
index fdc26c8da..de6eb8d4f 100644
--- a/7-animation/3-js-animation/2-animate-ball-hops/task.md
+++ b/7-animation/3-js-animation/2-animate-ball-hops/task.md
@@ -2,12 +2,12 @@ importance: 5
 
 ---
 
-# Animate the ball bouncing to the right
+# Anime a bola quicando para a direita
 
-Make the ball bounce to the right. Like this:
+Faça a bola quicar para a direita. Assim:
 
 [iframe height=250 src="solution"]
 
-Write the animation code. The distance to the left is `100px`.
+Escreva o código de animação. A distância para a esquerda é `100px`.
 
-Take the solution of the previous task <info:task/animate-ball> as the source.
+Use a solução da atividade anterior <info:task/animate-ball> como a fonte.
diff --git a/7-animation/3-js-animation/article.md b/7-animation/3-js-animation/article.md
index b367ec09f..cdbba3cd9 100644
--- a/7-animation/3-js-animation/article.md
+++ b/7-animation/3-js-animation/article.md
@@ -1,157 +1,156 @@
-# JavaScript animations
+# Animações em JavaScript
 
-JavaScript animations can handle things that CSS can't.
+Animações em JavaScript podem lidar com situações que CSS não pode.
 
-For instance, moving along a complex path, with a timing function different from Bezier curves, or an animation on a canvas.
+Por exemplo, movimentação por um caminho complexo, com uma função de tempo diferente das curvas de Bezier, ou uma animação em um canvas.
 
-## Using setInterval
+## Utilizando setInterval
 
-An animation can be implemented as a sequence of frames -- usually small changes to HTML/CSS properties.
+A animação pode ser implmentada como uma sequência de frames (quadros) -- geralmente pequenas modificações nas propriedades de HTML/CSS.
 
-For instance, changing `style.left` from `0px` to `100px` moves the element. And if we increase it in `setInterval`, changing by `2px` with a tiny delay, like 50 times per second, then it looks smooth. That's the same principle as in the cinema: 24 frames per second is enough to make it look smooth.
+Por exemplo, modificando `style.left` de `0px` para `100px` movimenta o elemento. E se aumentarmos em `setInterval`, mudando por `2px` com um pequeno atraso, como 50 vezes por segundo, parecerá suave. Este é o mesmo princípio do cinema: 24 quadros por segundo é o suficiente para fazer com que pareça suave.
 
-The pseudo-code can look like this:
+O pseudo-código pode ficar assim:
 
 ```js
 let timer = setInterval(function() {
   if (animation complete) clearInterval(timer);
   else increase style.left by 2px
-}, 20); // change by 2px every 20ms, about 50 frames per second
+}, 20); //aumenta 2px a cada 20ms, em média 50 quadros por segundo
 ```
 
-More complete example of the animation:
+Exemplo mais completo da animação:
 
 ```js
-let start = Date.now(); // remember start time
+let start = Date.now() // preservar o tempo inicial
 
-let timer = setInterval(function() {
-  // how much time passed from the start?
-  let timePassed = Date.now() - start;
+let timer = setInterval(function () {
+  // quanto tempo passou desde o início?
+  let timePassed = Date.now() - start
 
-  if (timePassed >= 2000) {
-    clearInterval(timer); // finish the animation after 2 seconds
-    return;
+  if (tempoPetimePassedrcorrido >= 2000) {
+    clearInterval(timer) // finaliza a animação depois de 2 segundos
+    return
   }
 
-  // draw the animation at the moment timePassed
-  draw(timePassed);
-
-}, 20);
+  // desenha a animação no momento timePassed
+  draw(timePassed)
+}, 20)
 
-// as timePassed goes from 0 to 2000
-// left gets values from 0px to 400px
+// como timePassed vai de 0 a 2000
+// deixa gets values de 0 a 400px
 function draw(timePassed) {
-  train.style.left = timePassed / 5 + 'px';
+  train.style.left = timePassed / 5 + 'px'
 }
 ```
 
-Click for the demo:
+Clique para a demo:
 
 [codetabs height=200 src="move"]
 
-## Using requestAnimationFrame
+## Utilizando requestAnimationFrame
 
-Let's imagine we have several animations running simultaneously.
+Vamos imaginar que temos diversas animações sendo executadas simultaneamente.
 
-If we run them separately, then even though each one has `setInterval(..., 20)`, then the browser would have to repaint much more often than every `20ms`.
+Se as execurtamos separadamente, mesmo que cada uma tenha `setInterval(..., 20)`, então o navegador teria que repintar com mais frequência que a cada `20ms`.
 
-That's because they have different starting time, so "every 20ms" differs between different animations. The intervals are not alignned. So we'll have several independent runs within `20ms`.
+Isso se deve a diferença de tempo de início entre a animação e o navegador, então "cada 20ms" não é o mesmo para diferentes animações. Os intervalos não são alinhados. Então teremos diversas execuções independentes dentro de `20ms`.
 
-In other words, this:
+Em outras palavras, isso:
 
 ```js
-setInterval(function() {
-  animate1();
-  animate2();
-  animate3();
+setInterval(function () {
+  animate1()
+  animate2()
+  animate3()
 }, 20)
 ```
 
-...Is lighter than three independent calls:
+...É mais leve que três referências independentes:
 
 ```js
-setInterval(animate1, 20); // independent animations
-setInterval(animate2, 20); // in different places of the script
-setInterval(animate3, 20);
+setInterval(animate1, 20) // animações independentes
+setInterval(animate2, 20) // em diferentes lugares do 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).
+Esses diferentes redesenhos deveriam ser agrupados juntos, para fazer com o que o redesenho seja mais fácil para o navegador (e, portanto, mais suave para as pessoas).
+
+Tem mais uma coisa a ser manter em mente. Às vezes, quando a CPU está sobrecarregada, ou quando existem outras reazões para resesenhar com menos frequência (como quando a aba do navegador está escondida), então não devemos executá-la a cada `20ms`.
 
-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`.
+Mas como sabemos disso em JavaScript? Existe uma especificação [Tempo de animação](http://www.w3.org/TR/animation-timing/) que fornece a função `requestAnimationFrame`. Ela aborda todos esses problemas e mais.
 
-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.
+A sintaxe:
 
-The syntax:
 ```js
 let requestId = requestAnimationFrame(callback)
 ```
 
-That schedules the `callback` function to run in the closest time when the browser wants to do animation.
+Isso agenda a função `callback` para ser executado no momento mais próximo que o navegador deseja fazer a animação.
 
-If we do changes in elements in `callback` then they will be grouped together with other `requestAnimationFrame` callbacks and with CSS animations. So there will be one geometry recalculation and repaint instead of many.
+Se modificarmos os elementos na `callback`, então eles serão agrupados juntos com outras `requestAnimationFrame` callbacks e com animações em CSS. Então haverá apenas um recálculo geométrico e repintura ao invés de várias.
+
+O valor retornado `requesId` pode ser utilizado para cancelar a chamada:
 
-The returned value `requestId` can be used to cancel the call:
 ```js
-// cancel the scheduled execution of callback
-cancelAnimationFrame(requestId);
+// cancela a execução agendada da callback
+cancelAnimationFrame(requestId)
 ```
 
-The `callback` gets one argument -- the time passed from the beginning of the page load in microseconds. This time can also be obtained by calling [performance.now()](mdn:api/Performance/now).
+A `callback` recebe um argumento -- o tempo decorrido desde o início do carregamento da página em microsegundos. Esse tempo também pode ser obtido chamando [performance.now()](mdn:api/Performance/now).
 
-Usually `callback` runs very soon, unless the CPU is overloaded or the laptop battery is almost discharged, or there's another reason.
+Geralmente `callback` é executada muito em breve, a menos que a CPU esteja sobrecarregada ou a bateria do computador está quase descarregada, ou por conta de outro motivo.
 
-The code below shows the time between first 10 runs for `requestAnimationFrame`. Usually it's 10-20ms:
+O código abaixo mostra o tempo entre as 10 primeiras chamadas de `requestAnimationFrame`. Geralmente é de 10-20ms:
 
 ```html run height=40 refresh
 <script>
-  let prev = performance.now();
-  let times = 0;
+  let prev = performance.now()
+  let times = 0
 
   requestAnimationFrame(function measure(time) {
-    document.body.insertAdjacentHTML("beforeEnd", Math.floor(time - prev) + " ");
-    prev = time;
+    document.body.insertAdjacentHTML('beforeEnd', Math.floor(time - prev) + ' ')
+    prev = time
 
-    if (times++ < 10) requestAnimationFrame(measure);
+    if (times++ < 10) requestAnimationFrame(measure)
   })
 </script>
 ```
 
-## Structured animation
+## Animação estruturada
 
-Now we can make a more universal animation function based on `requestAnimationFrame`:
+Agora podemos fazer uma função de animação mais universal baseada em `requestAnimationFrame`:
 
 ```js
-function animate({timing, draw, duration}) {
-
-  let start = performance.now();
+function animate({ timing, draw, duration }) {
+  let start = performance.now()
 
   requestAnimationFrame(function animate(time) {
-    // timeFraction goes from 0 to 1
-    let timeFraction = (time - start) / duration;
-    if (timeFraction > 1) timeFraction = 1;
+    // timeFraction vai de 0 a 1
+    let timeFraction = (time - start) / duration
+    if (timeFraction > 1) timeFraction = 1
 
-    // calculate the current animation state
+    // calcula o atual estado de animação
     let progress = timing(timeFraction)
 
-    draw(progress); // draw it
+    draw(progress) // o desenha
 
     if (timeFraction < 1) {
-      requestAnimationFrame(animate);
+      requestAnimationFrame(animate)
     }
-
-  });
+  })
 }
 ```
 
-Function `animate` accepts 3 parameters that essentially describes the animation:
+Função `animate` aceita 3 parâmetros que essencialmente descrevem a animação:
 
 `duration`
-: Total time of animation. Like, `1000`.
+: Tempo total da animação. Como, `1000`.
 
 `timing(timeFraction)`
-: Timing function, like CSS-property `transition-timing-function` that gets the fraction of time that passed (`0` at start, `1` at the end) and returns the animation completion (like `y` on the Bezier curve).
+: Função de tempo, como a propriedade CSS `transition-timing-function` que recebe a fração de tempo percorrido (`0` no início, `1` no final) e retorna a conclusão da animação (como `y` na curva de Bezier).
 
-    For instance, a linear function means that the animation goes on uniformly with the same speed:
+    Por exemplo, uma função linear significa que a animação continue uniformemente com a mesma velocidade:
 
     ```js
     function linear(timeFraction) {
@@ -162,56 +161,55 @@ Function `animate` accepts 3 parameters that essentially describes the animation
     It's graph:
     ![](linear.svg)
 
-    That's just like `transition-timing-function: linear`. There are more interesting variants shown below.
+    Isso é igual a `transition-timing-function: linear`. Existem variantes mais interessantes mostradas abaixo.
 
 `draw(progress)`
-: The function that takes the animation completion state and draws it. The value `progress=0` denotes the beginning animation state, and `progress=1` -- the end state.
+: A função que recebe o estado de conclusão da animação e o extrai. O valor `progress=0` denota o estado do início da animação, e `progress=1` -- o estado final.
 
-    This is that function that actually draws out the animation.
+    Essa é a função que desenha a animação de fato.
 
-    It can move the element:
+    Pode mover o elemento:
     ```js
     function draw(progress) {
       train.style.left = progress + 'px';
     }
     ```
 
-    ...Or do anything else, we can animate anything, in any way.
+    ...Ou fazer qualquer outra coisa, podemos animar qualquer coisa, de qualquer jeito.
 
+Vamos animar o elemento `width` de `0` a `100%` usando nossa função.
 
-Let's animate the element `width` from `0` to `100%` using our function.
-
-Click on the element for the demo:
+Clique no elemento para a demo:
 
 [codetabs height=60 src="width"]
 
-The code for it:
+O código:
 
 ```js
 animate({
   duration: 1000,
   timing(timeFraction) {
-    return timeFraction;
+    return timeFraction
   },
   draw(progress) {
-    elem.style.width = progress * 100 + '%';
-  }
-});
+    elem.style.width = progress * 100 + '%'
+  },
+})
 ```
 
-Unlike CSS animation, we can make any timing function and any drawing function here. The timing function is not limited by Bezier curves. And `draw` can go beyond properties, create new elements for like fireworks animation or something.
+Ao contrário da animação CSS, podemos fazer qualquer função de tempo e qualquer função de desenho. A função de tempo não é limitada pelas curvas de Bezier. E `draw` pode ir além das propriedades, criar novos elements para animações como fogos de artifício ou algo do tipo.
 
-## Timing functions
+## Funções de tempo
 
-We saw the simplest, linear timing function above.
+Vimos a função linear de tempo mais simples acima.
 
-Let's see more of them. We'll try movement animations with different timing functions to see how they work.
+Vejamos mais delas. Vamos tentar animações de movimento com diferentes funções de tempo para vermos como elas funcionam.
 
-### Power of n
+### Potência do n
 
-If we want to speed up the animation, we can use `progress` in the power `n`.
+Se queremos acelerar a animação, podemos usar `progress` na potência `n`.
 
-For instance, a parabolic curve:
+Por exemplo, uma curva parabólica:
 
 ```js
 function quad(timeFraction) {
@@ -219,47 +217,47 @@ function quad(timeFraction) {
 }
 ```
 
-The graph:
+O gráfico:
 
 ![](quad.svg)
 
-See in action (click to activate):
+Veja em ação (clique para ativar):
 
 [iframe height=40 src="quad" link]
 
-...Or the cubic curve or event greater `n`. Increasing the power makes it speed up faster.
+...Ou a curva cúbica ou evento maior que `n`. Aumentar a potência faz com que acelere mais rapidamente.
 
-Here's the graph for `progress` in the power `5`:
+Aqui está o gráfico para `progress` na protência `5`:
 
 ![](quint.svg)
 
-In action:
+Em ação:
 
 [iframe height=40 src="quint" link]
 
-### The arc
+### O arco
 
-Function:
+Função:
 
 ```js
 function circ(timeFraction) {
-  return 1 - Math.sin(Math.acos(timeFraction));
+  return 1 - Math.sin(Math.acos(timeFraction))
 }
 ```
 
-The graph:
+O gráfico:
 
 ![](circ.svg)
 
 [iframe height=40 src="circ" link]
 
-### Back: bow shooting
+### Back: tiro com arco
 
-This function does the "bow shooting". First we "pull the bowstring", and then "shoot".
+A função faz o "tiro com arco". Primeiro, "puxamos a corda do arco", e depois "atiramos".
 
-Unlike previous functions, it depends on an additional parameter `x`, the "elasticity coefficient". The distance of "bowstring pulling" is defined by it.
+Ao contrário das funções anteriores, esta depende de um parâmetro adicional `x`, o "coeficiente de elasticidade". A distância de "puxar a corda do arco" é definida por ele.
 
-The code:
+O código:
 
 ```js
 function back(x, timeFraction) {
@@ -267,19 +265,19 @@ function back(x, timeFraction) {
 }
 ```
 
-**The graph for `x = 1.5`:**
+**O gráfico para `x = 1.5`:**
 
 ![](back.svg)
 
-For animation we use it with a specific value of `x`. Example for `x = 1.5`:
+Para animação, usamos um valor específico de `x`. Exemplo para `x = 1.5`:
 
 [iframe height=40 src="back" link]
 
-### Bounce
+### Quique ou pulo
 
-Imagine we are dropping a ball. It falls down, then bounces back a few times and stops.
+Imagine que estamos derrubando uma bola. Ela cai, depois quica algumas vezes e para.
 
-The `bounce` function does the same, but in the reverse order: "bouncing" starts immediately. It uses few special coefficients for that:
+A função `bounce` faz o mesmo, mas em ordem reversa: o "quique" começa imediatamente. Ele usa alguns coeficientes especiais para isso:
 
 ```js
 function bounce(timeFraction) {
@@ -291,165 +289,166 @@ function bounce(timeFraction) {
 }
 ```
 
-In action:
+Em ação:
 
 [iframe height=40 src="bounce" link]
 
-### Elastic animation
+### Animação elástica
 
-One more "elastic" function that accepts an additional parameter `x` for the "initial range".
+Mais uma função "elástica" que aceita um parâmetro acidional `x` para o "intervalo inicial".
 
 ```js
 function elastic(x, timeFraction) {
-  return Math.pow(2, 10 * (timeFraction - 1)) * Math.cos(20 * Math.PI * x / 3 * timeFraction)
+  return (
+    Math.pow(2, 10 * (timeFraction - 1)) *
+    Math.cos(((20 * Math.PI * x) / 3) * timeFraction)
+  )
 }
 ```
 
-**The graph for `x=1.5`:**
+**O gráfico para `x=1.5`:**
 ![](elastic.svg)
 
-In action for `x=1.5`:
+Em ação para `x=1.5`:
 
 [iframe height=40 src="elastic" link]
 
-## Reversal: ease*
+## Reversão: ease\*
 
-So we have a collection of timing functions. Their direct application is called "easeIn".
+Então temos uma coleção de funções de tempo. Sua aplicação direta é chamada "easeIn".
 
-Sometimes we need to show the animation in the reverse order. That's done with the "easeOut" transform.
+Às vezes, precisamos mostrar a animação em ordem reversa. Isso é feito com a transformação "easeOut".
 
 ### easeOut
 
-In the "easeOut" mode the `timing` function is put into a wrapper `timingEaseOut`:
+No modo de "eastOut", a função `timing` é envoltada pela `timingEaseOut`:
 
 ```js
 timingEaseOut(timeFraction) = 1 - timing(1 - timeFraction)
 ```
 
-In other words, we have a "transform" function `makeEaseOut` that takes a "regular" timing function and returns the wrapper around it:
+Em outras palavras, temos uma função de "transformar" `makeEaseOut` que recebe a função de tempo "regular" e retorna a função que a envolve:
 
 ```js
-// accepts a timing function, returns the transformed variant
+// aceita a função de tempo, returna a variante transformada
 function makeEaseOut(timing) {
-  return function(timeFraction) {
-    return 1 - timing(1 - timeFraction);
+  return function (timeFraction) {
+    return 1 - timing(1 - timeFraction)
   }
 }
 ```
 
-For instance, we can take the `bounce` function described above and apply it:
+Por exemplo, podemos usar a função `bounce` descrita acima e aplicá-la:
 
 ```js
-let bounceEaseOut = makeEaseOut(bounce);
+let bounceEaseOut = makeEaseOut(bounce)
 ```
 
-Then the bounce will be not in the beginning, but at the end of the animation. Looks even better:
+Assim o quique não será no início, mas no final da animação. O que parece bem melhor:
 
 [codetabs src="bounce-easeout"]
 
-Here we can see how the transform changes the behavior of the function:
+Aqui podemos ver como a transformação muda o comportamento da função:
 
 ![](bounce-inout.svg)
 
-If there's an animation effect in the beginning, like bouncing -- it will be shown at the end.
+Se existe um efeito de animação no início, como quique -- será mostrado no final.
 
-In the graph above the <span style="color:#EE6B47">regular bounce</span> has the red color, and the <span style="color:#62C0DC">easeOut bounce</span> is blue.
+No gráfico acima, <span style="color:#EE6B47">quique regular</span> tem a cor vermelha, e <span style="color:#62C0DC">quique easeOut</span> é azul.
 
-- Regular bounce -- the object bounces at the bottom, then at the end sharply jumps to the top.
-- After `easeOut` -- it first jumps to the top, then bounces there.
+- Quique regular -- o objeto salta na parte inferior, e no final pula abruptamente para o topo.
+- Depois `easeOut` -- ele pula no começo, depois quica naquele lugar.
 
 ### easeInOut
 
-We also can show the effect both in the beginning and the end of the animation. The transform is called "easeInOut".
+Podemos também mostrar o efeito tanto no começo quanto no final da animação. A transformação é chamada "easeInOut".
 
-Given the timing function, we calculate the animation state like this:
+Dado a função de tempo, calculamos o estado de animação assim:
 
 ```js
-if (timeFraction <= 0.5) { // first half of the animation
-  return timing(2 * timeFraction) / 2;
-} else { // second half of the animation
-  return (2 - timing(2 * (1 - timeFraction))) / 2;
+if (timeFraction <= 0.5) {
+  // primeira metade da animação
+  return timing(2 * timeFraction) / 2
+} else {
+  // segunda metade da animação
+  return (2 - timing(2 * (1 - timeFraction))) / 2
 }
 ```
 
-The wrapper code:
+O código do wrapper:
 
 ```js
 function makeEaseInOut(timing) {
-  return function(timeFraction) {
-    if (timeFraction < .5)
-      return timing(2 * timeFraction) / 2;
-    else
-      return (2 - timing(2 * (1 - timeFraction))) / 2;
+  return function (timeFraction) {
+    if (timeFraction < 0.5) return timing(2 * timeFraction) / 2
+    else return (2 - timing(2 * (1 - timeFraction))) / 2
   }
 }
 
-bounceEaseInOut = makeEaseInOut(bounce);
+bounceEaseInOut = makeEaseInOut(bounce)
 ```
 
-In action, `bounceEaseInOut`:
+Em ação, `bounceEaseInOut`:
 
 [codetabs src="bounce-easeinout"]
 
-The "easeInOut" transform joins two graphs into one: `easeIn` (regular) for the first half of the animation and `easeOut` (reversed) -- for the second part.
+A transformaçào "easeInOut" une dois gráficos em um: `easeIn` (regular) para a primeira metade da animação e `easeOut` (invertida) -- para a segunda parte.
 
-The effect is clearly seen if we compare the graphs of `easeIn`, `easeOut` and `easeInOut` of the `circ` timing function:
+O efeito é claramente visto se compararmos os gráficos de `easeIn`, `easeOut` e `easeInOut` da função `circ`:
 
 ![](circ-ease.svg)
 
-- <span style="color:#EE6B47">Red</span> is the regular variantof `circ` (`easeIn`).
-- <span style="color:#8DB173">Green</span> -- `easeOut`.
-- <span style="color:#62C0DC">Blue</span> -- `easeInOut`.
+- <span style="color:#EE6B47">Vermelha</span> é a variante regular de `circ` (`easeIn`).
+- <span style="color:#8DB173">Verde</span> -- `easeOut`.
+- <span style="color:#62C0DC">Azul</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.
+Como podemos ver, o gráfico da primeira metade da animação é a reduzida `easeIn`, e a segunda metade é a reduzida `easeOut`. Como resultado, a animação começa e termina com o mesmo efeito.
 
-## More interesting "draw"
+## "Desenho" mais interessante
 
-Instead of moving the element we can do something else. All we need is to write the write the proper `draw`.
+Ao invés de mover o elemento, podemos fazer outra coisa. Tudo o que precisamos é escrever a `draw` apropriada.
 
-Here's the animated "bouncing" text typing:
+Aqui está o texto animato "quicando":
 
 [codetabs src="text"]
 
-## Summary
+## Resumo
 
-For animations that CSS can't handle well, or those that need tight control, JavaScript can help. JavaScript animations should be implemented via `requestAnimationFrame`. That built-in method allows to setup a callback function to run when the browser will be preparing a repaint. Usually that's very soon, but the exact time depends on the browser.
+Para animação que CSS não lida bem, ou aquelas que precisam de controle rígido, JavaScript pode ajudar. Animações JavaScript devem ser implementadas via `requestAnimationFrame`. Esse método embutido permite configurar uma callback para que seja executada quando o navegador estiver preparando uma repintura. Geralmente é bem breve, mas o tempo exato depende do navegador.
 
-When a page is in the background, there are no repaints at all, so the callback won't run: the animation will be suspended and won't consume resources. That's great.
+Quando uma página está em segundo plano, não ocorrem repinturas, então a callback não será executada: a animação será suspensa e não consumirá recursos. Isso é ótimo.
 
-Here's the helper `animate` function to setup most animations:
+Aqui está a função helper `animate` para configura a maioria das animações:
 
 ```js
-function animate({timing, draw, duration}) {
-
-  let start = performance.now();
+function animate({ timing, draw, duration }) {
+  let start = performance.now()
 
   requestAnimationFrame(function animate(time) {
-    // timeFraction goes from 0 to 1
-    let timeFraction = (time - start) / duration;
-    if (timeFraction > 1) timeFraction = 1;
+    // timeFraction vai de 0 a 1
+    let timeFraction = (time - start) / duration
+    if (timeFraction > 1) timeFraction = 1
 
-    // calculate the current animation state
-    let progress = timing(timeFraction);
+    // calcular o atual estado da animação
+    let progress = timing(timeFraction)
 
-    draw(progress); // draw it
+    draw(progress) // o desenha
 
     if (timeFraction < 1) {
-      requestAnimationFrame(animate);
+      requestAnimationFrame(animate)
     }
-
-  });
+  })
 }
 ```
 
-Options:
+Opções:
 
-- `duration` -- the total animation time in ms.
-- `timing` -- the function to calculate animation progress. Gets a time fraction from 0 to 1, returns the animation progress, usually from 0 to 1.
-- `draw` -- the function to draw the animation.
+- `duration` -- o tempo total da animação em ms.
+- `timing` -- a função para calcular o progresso da animação. Recebe uma fração de tempo de 0 a 1, retorna o progresso da animação, geralmente de 0 a 1.
+- `draw` -- a função para desenhar a animação.
 
-Surely we could improve it, add more bells and whistles, but JavaScript animations are not applied on a daily basis. They are used to do something interesting and non-standard. So you'd want to add the features that you need when you need them.
+Certamente poderíamos melhorá-las, adicionar mais recursos adicionais supérfluos, mas animações JavaScript não são aplicadas no dia-a-dia. Elas são usadas para fazer coisas mais interessantes e não-padrão. Então você gostaria de adicionar novas funcionalidades quando precisa delas.
 
-JavaScript animations can use any timing function. We covered a lot of examples and transformations to make them even more versatile. Unlike CSS, we are not limited to Bezier curves here.
+Animações JavaScript podem usar qualquer função de tempo. Cobrimos muitos exemplos e transformações para fazê-las ainda mais versáteis. Ao contrário de CSS, não estamos limitados às curvas de Bezier.
 
-The same is about `draw`: we can animate anything, not just CSS properties.
+É o mesmo com `draw`: podemos animar qualquer coisa, não só propriedades CSS.
diff --git a/7-animation/3-js-animation/text.view/index.html b/7-animation/3-js-animation/text.view/index.html
index e404fe5c4..eb58756c2 100644
--- a/7-animation/3-js-animation/text.view/index.html
+++ b/7-animation/3-js-animation/text.view/index.html
@@ -1,50 +1,51 @@
-<!DOCTYPE HTML>
+<!DOCTYPE html>
 <html>
 
 <head>
-  <meta charset="utf-8">
-  <link rel="stylesheet" href="style.css">
+  <meta charset="utf-8" />
+  <link rel="stylesheet" href="style.css" />
   <script src="https://js.cx/libs/animate.js"></script>
 </head>
 
 <body>
-
-
-  <textarea id="textExample" rows="5" cols="60">He took his vorpal sword in hand:
-Long time the manxome foe he sought—
-So rested he by the Tumtum tree,
-And stood awhile in thought.
+  <textarea id="textExample" rows="5" cols="60">
+    Ele pegou sua espada vorpal na mão:
+    Faz tempo que o manxome inimigo que ele procurava -
+    Então ele descansou perto da árvore Tumtum,
+    E ficou um pouco em pensamento.
   </textarea>
 
-  <button onclick="animateText(textExample)">Run the animated typing!</button>
+  <button onclick="animateText(textExample)">
+    Execute a animação escrita!
+  </button>
 
   <script>
     function animateText(textArea) {
-      let text = textArea.value;
+      let text = textArea.value
       let to = text.length,
-        from = 0;
+        from = 0
 
       animate({
         duration: 5000,
         timing: bounce,
-        draw: function(progress) {
+        draw: function (progress) {
           let result = (to - from) * progress + from;
           textArea.value = text.substr(0, Math.ceil(result))
         }
       });
     }
 
-
     function bounce(timeFraction) {
       for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
         if (timeFraction >= (7 - 4 * a) / 11) {
-          return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
+          return (
+            -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) +
+            Math.pow(b, 2)
+          )
         }
       }
     }
   </script>
-
-
 </body>
 
-</html>
+</html>
\ No newline at end of file

From 66086aef0978291009611834f766e846e45c0e0e Mon Sep 17 00:00:00 2001
From: Samantha Vale <karlasamantha@gmail.com>
Date: Tue, 19 May 2020 19:45:47 -0700
Subject: [PATCH 2/7] fixes typos

---
 .../2-animate-ball-hops/solution.md             |  2 +-
 7-animation/3-js-animation/text.view/index.html | 17 ++++++-----------
 2 files changed, 7 insertions(+), 12 deletions(-)

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
index fd23c0034..a8cdfa41d 100644
--- a/7-animation/3-js-animation/2-animate-ball-hops/solution.md
+++ b/7-animation/3-js-animation/2-animate-ball-hops/solution.md
@@ -4,7 +4,7 @@ A coordenada horizontal é modificada por outra regra: ela não "quica", mas gra
 
 Podemos escrever mais um `animate` para isso.
 
-Como função the temo podemos usar `liner`, mas algo como `makeEaseOut(quad)` parece bem melhor.
+Como função de tempo podemos usar `liner`, mas algo como `makeEaseOut(quad)` parece bem melhor.
 
 O código:
 
diff --git a/7-animation/3-js-animation/text.view/index.html b/7-animation/3-js-animation/text.view/index.html
index eb58756c2..29ea6dadd 100644
--- a/7-animation/3-js-animation/text.view/index.html
+++ b/7-animation/3-js-animation/text.view/index.html
@@ -1,9 +1,9 @@
-<!DOCTYPE html>
+<!DOCTYPE HTML>
 <html>
 
 <head>
-  <meta charset="utf-8" />
-  <link rel="stylesheet" href="style.css" />
+  <meta charset="utf-8">
+  <link rel="stylesheet" href="style.css">
   <script src="https://js.cx/libs/animate.js"></script>
 </head>
 
@@ -15,15 +15,13 @@
     E ficou um pouco em pensamento.
   </textarea>
 
-  <button onclick="animateText(textExample)">
-    Execute a animação escrita!
-  </button>
+  <button onclick="animateText(textExample)">Execute a animação em texto!</button>
 
   <script>
     function animateText(textArea) {
       let text = textArea.value
       let to = text.length,
-        from = 0
+        from = 0;
 
       animate({
         duration: 5000,
@@ -38,10 +36,7 @@
     function bounce(timeFraction) {
       for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
         if (timeFraction >= (7 - 4 * a) / 11) {
-          return (
-            -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) +
-            Math.pow(b, 2)
-          )
+          return (-Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2))
         }
       }
     }

From 0c25396da8fb97d5d96d78befd4a502e6033ed40 Mon Sep 17 00:00:00 2001
From: Samantha Vale <karlasamantha@gmail.com>
Date: Mon, 25 May 2020 20:46:07 -0700
Subject: [PATCH 3/7] addresses pr feedback

---
 7-animation/3-js-animation/article.md | 102 +++++++++++++-------------
 1 file changed, 51 insertions(+), 51 deletions(-)

diff --git a/7-animation/3-js-animation/article.md b/7-animation/3-js-animation/article.md
index cdbba3cd9..7a4dd4e32 100644
--- a/7-animation/3-js-animation/article.md
+++ b/7-animation/3-js-animation/article.md
@@ -6,7 +6,7 @@ Por exemplo, movimentação por um caminho complexo, com uma função de tempo d
 
 ## Utilizando setInterval
 
-A animação pode ser implmentada como uma sequência de frames (quadros) -- geralmente pequenas modificações nas propriedades de HTML/CSS.
+A animação pode ser implementada como uma sequência de frames (quadros) -- geralmente pequenas modificações nas propriedades de HTML/CSS.
 
 Por exemplo, modificando `style.left` de `0px` para `100px` movimenta o elemento. E se aumentarmos em `setInterval`, mudando por `2px` com um pequeno atraso, como 50 vezes por segundo, parecerá suave. Este é o mesmo princípio do cinema: 24 quadros por segundo é o suficiente para fazer com que pareça suave.
 
@@ -22,25 +22,26 @@ let timer = setInterval(function() {
 Exemplo mais completo da animação:
 
 ```js
-let start = Date.now() // preservar o tempo inicial
+let start = Date.now(); // preservar o tempo inicial
 
-let timer = setInterval(function () {
+let timer = setInterval(function() {
   // quanto tempo passou desde o início?
-  let timePassed = Date.now() - start
+  let timePassed = Date.now() - start;
 
-  if (tempoPetimePassedrcorrido >= 2000) {
-    clearInterval(timer) // finaliza a animação depois de 2 segundos
-    return
+  if (timePassed >= 2000) {
+    clearInterval(timer); // finaliza a animação depois de 2 segundos
+    return;
   }
 
   // desenha a animação no momento timePassed
-  draw(timePassed)
-}, 20)
+  draw(timePassed);
+
+}, 20);
 
-// como timePassed vai de 0 a 2000
-// deixa gets values de 0 a 400px
+// timePassed vai de 0 a 2000
+// recebe valores de 0 a 400px
 function draw(timePassed) {
-  train.style.left = timePassed / 5 + 'px'
+  train.style.left = timePassed / 5 + 'px';
 }
 ```
 
@@ -105,14 +106,14 @@ O código abaixo mostra o tempo entre as 10 primeiras chamadas de `requestAnimat
 
 ```html run height=40 refresh
 <script>
-  let prev = performance.now()
-  let times = 0
+  let prev = performance.now();
+  let times = 0;
 
   requestAnimationFrame(function measure(time) {
-    document.body.insertAdjacentHTML('beforeEnd', Math.floor(time - prev) + ' ')
-    prev = time
+    document.body.insertAdjacentHTML('beforeEnd', Math.floor(time - prev) + ' ');
+    prev = time;
 
-    if (times++ < 10) requestAnimationFrame(measure)
+    if (times++ < 10) requestAnimationFrame(measure);
   })
 </script>
 ```
@@ -123,29 +124,30 @@ Agora podemos fazer uma função de animação mais universal baseada em `reques
 
 ```js
 function animate({ timing, draw, duration }) {
-  let start = performance.now()
+
+  let start = performance.now();
 
   requestAnimationFrame(function animate(time) {
     // timeFraction vai de 0 a 1
-    let timeFraction = (time - start) / duration
+    let timeFraction = (time - start) / duration;
     if (timeFraction > 1) timeFraction = 1
 
     // calcula o atual estado de animação
-    let progress = timing(timeFraction)
+    let progress = timing(timeFraction);
 
-    draw(progress) // o desenha
+    draw(progress); // o desenha
 
     if (timeFraction < 1) {
-      requestAnimationFrame(animate)
+      requestAnimationFrame(animate);
     }
-  })
+  });
 }
 ```
 
 Função `animate` aceita 3 parâmetros que essencialmente descrevem a animação:
 
 `duration`
-: Tempo total da animação. Como, `1000`.
+: Tempo total da animação. Exemplo, `1000`.
 
 `timing(timeFraction)`
 : Função de tempo, como a propriedade CSS `transition-timing-function` que recebe a fração de tempo percorrido (`0` no início, `1` no final) e retorna a conclusão da animação (como `y` na curva de Bezier).
@@ -158,7 +160,7 @@ Função `animate` aceita 3 parâmetros que essencialmente descrevem a animaçã
     }
     ```
 
-    It's graph:
+    Seu gráfico:
     ![](linear.svg)
 
     Isso é igual a `transition-timing-function: linear`. Existem variantes mais interessantes mostradas abaixo.
@@ -192,9 +194,9 @@ animate({
     return timeFraction
   },
   draw(progress) {
-    elem.style.width = progress * 100 + '%'
-  },
-})
+    elem.style.width = progress * 100 + '%';
+  }
+});
 ```
 
 Ao contrário da animação CSS, podemos fazer qualquer função de tempo e qualquer função de desenho. A função de tempo não é limitada pelas curvas de Bezier. E `draw` pode ir além das propriedades, criar novos elements para animações como fogos de artifício ou algo do tipo.
@@ -227,7 +229,7 @@ Veja em ação (clique para ativar):
 
 ...Ou a curva cúbica ou evento maior que `n`. Aumentar a potência faz com que acelere mais rapidamente.
 
-Aqui está o gráfico para `progress` na protência `5`:
+Aqui está o gráfico para `progress` na potência `5`:
 
 ![](quint.svg)
 
@@ -241,7 +243,7 @@ Função:
 
 ```js
 function circ(timeFraction) {
-  return 1 - Math.sin(Math.acos(timeFraction))
+  return 1 - Math.sin(Math.acos(timeFraction));
 }
 ```
 
@@ -299,10 +301,7 @@ Mais uma função "elástica" que aceita um parâmetro acidional `x` para o "int
 
 ```js
 function elastic(x, timeFraction) {
-  return (
-    Math.pow(2, 10 * (timeFraction - 1)) *
-    Math.cos(((20 * Math.PI * x) / 3) * timeFraction)
-  )
+  return (Math.pow(2, 10 * (timeFraction - 1)) *Math.cos(((20 * Math.PI * x) / 3) * timeFraction))
 }
 ```
 
@@ -333,7 +332,7 @@ Em outras palavras, temos uma função de "transformar" `makeEaseOut` que recebe
 // aceita a função de tempo, returna a variante transformada
 function makeEaseOut(timing) {
   return function (timeFraction) {
-    return 1 - timing(1 - timeFraction)
+    return 1 - timing(1 - timeFraction);
   }
 }
 ```
@@ -341,7 +340,7 @@ function makeEaseOut(timing) {
 Por exemplo, podemos usar a função `bounce` descrita acima e aplicá-la:
 
 ```js
-let bounceEaseOut = makeEaseOut(bounce)
+let bounceEaseOut = makeEaseOut(bounce);
 ```
 
 Assim o quique não será no início, mas no final da animação. O que parece bem melhor:
@@ -366,12 +365,10 @@ Podemos também mostrar o efeito tanto no começo quanto no final da animação.
 Dado a função de tempo, calculamos o estado de animação assim:
 
 ```js
-if (timeFraction <= 0.5) {
-  // primeira metade da animação
-  return timing(2 * timeFraction) / 2
-} else {
-  // segunda metade da animação
-  return (2 - timing(2 * (1 - timeFraction))) / 2
+if (timeFraction <= 0.5) { // primeira metade da animação
+  return timing(2 * timeFraction) / 2;
+} else { // segunda metade da animação
+  return (2 - timing(2 * (1 - timeFraction))) / 2;
 }
 ```
 
@@ -380,12 +377,14 @@ O código do wrapper:
 ```js
 function makeEaseInOut(timing) {
   return function (timeFraction) {
-    if (timeFraction < 0.5) return timing(2 * timeFraction) / 2
-    else return (2 - timing(2 * (1 - timeFraction))) / 2
+    if (timeFraction < 0.5) 
+      return timing(2 * timeFraction) / 2;
+    else
+      return (2 - timing(2 * (1 - timeFraction))) / 2;
   }
 }
 
-bounceEaseInOut = makeEaseInOut(bounce)
+bounceEaseInOut = makeEaseInOut(bounce);
 ```
 
 Em ação, `bounceEaseInOut`:
@@ -422,20 +421,21 @@ Aqui está a função helper `animate` para configura a maioria das animações:
 
 ```js
 function animate({ timing, draw, duration }) {
-  let start = performance.now()
+
+  let start = performance.now();
 
   requestAnimationFrame(function animate(time) {
     // timeFraction vai de 0 a 1
-    let timeFraction = (time - start) / duration
-    if (timeFraction > 1) timeFraction = 1
+    let timeFraction = (time - start) / duration;
+    if (timeFraction > 1) timeFraction = 1;
 
     // calcular o atual estado da animação
-    let progress = timing(timeFraction)
+    let progress = timing(timeFraction);
 
-    draw(progress) // o desenha
+    draw(progress); // o desenha
 
     if (timeFraction < 1) {
-      requestAnimationFrame(animate)
+      requestAnimationFrame(animate);
     }
   })
 }

From 4ae47f0d6ae15972f6362e0fd331b369d5631d58 Mon Sep 17 00:00:00 2001
From: Samantha Vale <karlasamantha@gmail.com>
Date: Tue, 25 May 2021 14:18:55 -0700
Subject: [PATCH 4/7] revert changes to double quotes

---
 .../2-animate-ball-hops/solution.md           |  4 +-
 7-animation/3-js-animation/article.md         | 38 +++++++++----------
 .../3-js-animation/text.view/index.html       |  8 ++--
 3 files changed, 25 insertions(+), 25 deletions(-)

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
index a8cdfa41d..e4c184dd0 100644
--- a/7-animation/3-js-animation/2-animate-ball-hops/solution.md
+++ b/7-animation/3-js-animation/2-animate-ball-hops/solution.md
@@ -17,7 +17,7 @@ animate({
   duration: 2000,
   timing: makeEaseOut(bounce),
   draw: function (progress) {
-    ball.style.top = height * progress + 'px'
+    ball.style.top = height * progress + "px"
   }
 });
 
@@ -26,7 +26,7 @@ animate({
   duration: 2000,
   timing: makeEaseOut(quad),
   draw: function (progress) {
-    ball.style.left = width * progress + 'px'
+    ball.style.left = width * progress + "px"
   }
 });
 ```
diff --git a/7-animation/3-js-animation/article.md b/7-animation/3-js-animation/article.md
index 7a4dd4e32..ebb5bb212 100644
--- a/7-animation/3-js-animation/article.md
+++ b/7-animation/3-js-animation/article.md
@@ -8,7 +8,7 @@ Por exemplo, movimentação por um caminho complexo, com uma função de tempo d
 
 A animação pode ser implementada como uma sequência de frames (quadros) -- geralmente pequenas modificações nas propriedades de HTML/CSS.
 
-Por exemplo, modificando `style.left` de `0px` para `100px` movimenta o elemento. E se aumentarmos em `setInterval`, mudando por `2px` com um pequeno atraso, como 50 vezes por segundo, parecerá suave. Este é o mesmo princípio do cinema: 24 quadros por segundo é o suficiente para fazer com que pareça suave.
+Por exemplo, modificando `style.left` de `0px` para `100px` move o elemento. E se aumentarmos em `setInterval`, mudando por `2px` com um pequeno atraso, como 50 vezes por segundo, parecerá suave. Este é o mesmo princípio do cinema: 24 quadros por segundo é o suficiente para fazer com que pareça suave.
 
 O pseudo-código pode ficar assim:
 
@@ -61,18 +61,18 @@ Em outras palavras, isso:
 
 ```js
 setInterval(function () {
-  animate1()
-  animate2()
-  animate3()
+  animate1();
+  animate2();
+  animate3();
 }, 20)
 ```
 
 ...É mais leve que três referências independentes:
 
 ```js
-setInterval(animate1, 20) // animações independentes
-setInterval(animate2, 20) // em diferentes lugares do script
-setInterval(animate3, 20)
+setInterval(animate1, 20); // animações independentes
+setInterval(animate2, 20); // em diferentes lugares do script
+setInterval(animate3, 20);
 ```
 
 Esses diferentes redesenhos deveriam ser agrupados juntos, para fazer com o que o redesenho seja mais fácil para o navegador (e, portanto, mais suave para as pessoas).
@@ -82,7 +82,6 @@ Tem mais uma coisa a ser manter em mente. Às vezes, quando a CPU está sobrecar
 Mas como sabemos disso em JavaScript? Existe uma especificação [Tempo de animação](http://www.w3.org/TR/animation-timing/) que fornece a função `requestAnimationFrame`. Ela aborda todos esses problemas e mais.
 
 A sintaxe:
-
 ```js
 let requestId = requestAnimationFrame(callback)
 ```
@@ -92,7 +91,6 @@ Isso agenda a função `callback` para ser executado no momento mais próximo qu
 Se modificarmos os elementos na `callback`, então eles serão agrupados juntos com outras `requestAnimationFrame` callbacks e com animações em CSS. Então haverá apenas um recálculo geométrico e repintura ao invés de várias.
 
 O valor retornado `requesId` pode ser utilizado para cancelar a chamada:
-
 ```js
 // cancela a execução agendada da callback
 cancelAnimationFrame(requestId)
@@ -110,7 +108,7 @@ O código abaixo mostra o tempo entre as 10 primeiras chamadas de `requestAnimat
   let times = 0;
 
   requestAnimationFrame(function measure(time) {
-    document.body.insertAdjacentHTML('beforeEnd', Math.floor(time - prev) + ' ');
+    document.body.insertAdjacentHTML("beforeEnd", Math.floor(time - prev) + " ");
     prev = time;
 
     if (times++ < 10) requestAnimationFrame(measure);
@@ -123,7 +121,7 @@ O código abaixo mostra o tempo entre as 10 primeiras chamadas de `requestAnimat
 Agora podemos fazer uma função de animação mais universal baseada em `requestAnimationFrame`:
 
 ```js
-function animate({ timing, draw, duration }) {
+function animate({timing, draw, duration}) {
 
   let start = performance.now();
 
@@ -140,6 +138,7 @@ function animate({ timing, draw, duration }) {
     if (timeFraction < 1) {
       requestAnimationFrame(animate);
     }
+    
   });
 }
 ```
@@ -179,6 +178,7 @@ Função `animate` aceita 3 parâmetros que essencialmente descrevem a animaçã
 
     ...Ou fazer qualquer outra coisa, podemos animar qualquer coisa, de qualquer jeito.
 
+
 Vamos animar o elemento `width` de `0` a `100%` usando nossa função.
 
 Clique no elemento para a demo:
@@ -191,7 +191,7 @@ O código:
 animate({
   duration: 1000,
   timing(timeFraction) {
-    return timeFraction
+    return timeFraction;
   },
   draw(progress) {
     elem.style.width = progress * 100 + '%';
@@ -331,7 +331,7 @@ Em outras palavras, temos uma função de "transformar" `makeEaseOut` que recebe
 ```js
 // aceita a função de tempo, returna a variante transformada
 function makeEaseOut(timing) {
-  return function (timeFraction) {
+  return function(timeFraction) {
     return 1 - timing(1 - timeFraction);
   }
 }
@@ -376,7 +376,7 @@ O código do wrapper:
 
 ```js
 function makeEaseInOut(timing) {
-  return function (timeFraction) {
+  return function(timeFraction) {
     if (timeFraction < 0.5) 
       return timing(2 * timeFraction) / 2;
     else
@@ -397,9 +397,9 @@ O efeito é claramente visto se compararmos os gráficos de `easeIn`, `easeOut`
 
 ![](circ-ease.svg)
 
-- <span style="color:#EE6B47">Vermelha</span> é a variante regular de `circ` (`easeIn`).
-- <span style="color:#8DB173">Verde</span> -- `easeOut`.
-- <span style="color:#62C0DC">Azul</span> -- `easeInOut`.
+- <span style="color:#EE6B47">Red</span> é a variante regular de `circ` (`easeIn`).
+- <span style="color:#8DB173">Greed</span> -- `easeOut`.
+- <span style="color:#62C0DC">Blue</span> -- `easeInOut`.
 
 Como podemos ver, o gráfico da primeira metade da animação é a reduzida `easeIn`, e a segunda metade é a reduzida `easeOut`. Como resultado, a animação começa e termina com o mesmo efeito.
 
@@ -417,10 +417,10 @@ Para animação que CSS não lida bem, ou aquelas que precisam de controle rígi
 
 Quando uma página está em segundo plano, não ocorrem repinturas, então a callback não será executada: a animação será suspensa e não consumirá recursos. Isso é ótimo.
 
-Aqui está a função helper `animate` para configura a maioria das animações:
+Aqui está uma função de ajuda `animate` para configurar a maioria das animações:
 
 ```js
-function animate({ timing, draw, duration }) {
+function animate({timing, draw, duration}) {
 
   let start = performance.now();
 
diff --git a/7-animation/3-js-animation/text.view/index.html b/7-animation/3-js-animation/text.view/index.html
index 29ea6dadd..03253a2a2 100644
--- a/7-animation/3-js-animation/text.view/index.html
+++ b/7-animation/3-js-animation/text.view/index.html
@@ -15,18 +15,18 @@
     E ficou um pouco em pensamento.
   </textarea>
 
-  <button onclick="animateText(textExample)">Execute a animação em texto!</button>
+  <button onclick="animateText(textExample)">Run the animated typing!</button>
 
   <script>
     function animateText(textArea) {
-      let text = textArea.value
+      let text = textArea.value;
       let to = text.length,
         from = 0;
 
       animate({
         duration: 5000,
         timing: bounce,
-        draw: function (progress) {
+        draw: function(progress) {
           let result = (to - from) * progress + from;
           textArea.value = text.substr(0, Math.ceil(result))
         }
@@ -43,4 +43,4 @@
   </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>

From c1f48783e137e92e569f6845a6a6c099b8b0490d Mon Sep 17 00:00:00 2001
From: Samantha Vale <karlasamantha@gmail.com>
Date: Thu, 26 Jan 2023 12:58:42 -0800
Subject: [PATCH 5/7] fix: addresses pr feedback

---
 7-animation/3-js-animation/1-animate-ball/solution.md  |  6 ++----
 .../3-js-animation/2-animate-ball-hops/solution.md     | 10 +++++-----
 7-animation/3-js-animation/2-animate-ball-hops/task.md |  4 ++--
 7-animation/3-js-animation/text.view/index.html        |  8 ++++----
 4 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/7-animation/3-js-animation/1-animate-ball/solution.md b/7-animation/3-js-animation/1-animate-ball/solution.md
index cb3b0d3e0..b444c514f 100644
--- a/7-animation/3-js-animation/1-animate-ball/solution.md
+++ b/7-animation/3-js-animation/1-animate-ball/solution.md
@@ -1,10 +1,8 @@
 Para quicar, podemos usar a propriedade CSS `top` e `position:absolute` para a bola dentro do campo com `position:relative`.
 
-A coordenada inferior do campo é `field.clientHeight`. Mas a propriedade `top` fornece coordenadas para o topo da bola, a posição da borda é `field.clientHeight - ball.clientHeight`.
+A coordenada inferior do campo é `field.clientHeight`. Mas a propriedade `top` fornece coordenadas para o topo da bola Então animamos a propriedade `top` a partir de `0` até `field.clientHeight - ball.clientHeight`, isto é até à posição mais baixa do topo da bola.
 
-Então animamos a propriedade `top` a partir de `0` até `field.clientHeight - ball.clientHeight`.
-
-Para obter o efeito de "quique", podemos usar a função de tempo `bounce` no modo `easeOut`
+Para obter o efeito de "quique", podemos usar a função de tempo `bounce` no modo `easeOut`.
 
 Aqui está o código final para a animação:
 
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
index e4c184dd0..aa0913b6c 100644
--- a/7-animation/3-js-animation/2-animate-ball-hops/solution.md
+++ b/7-animation/3-js-animation/2-animate-ball-hops/solution.md
@@ -4,15 +4,15 @@ A coordenada horizontal é modificada por outra regra: ela não "quica", mas gra
 
 Podemos escrever mais um `animate` para isso.
 
-Como função de tempo podemos usar `liner`, mas algo como `makeEaseOut(quad)` parece bem melhor.
+Como função de tempo podemos usar `linear`, mas algo como `makeEaseOut(quad)` parece bem melhor.
 
 O código:
 
 ```js
-let height = field.clientHeight - ball.clientHeight
-let width = 100
+let height = field.clientHeight - ball.clientHeight;
+let width = 100;
 
-// animate top (bouncing)
+// anime o topo (quicando)
 animate({
   duration: 2000,
   timing: makeEaseOut(bounce),
@@ -21,7 +21,7 @@ animate({
   }
 });
 
-// animate left (moving to the right)
+// anime a esquerda (movendo para a direita)
 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
index de6eb8d4f..3bf961239 100644
--- a/7-animation/3-js-animation/2-animate-ball-hops/task.md
+++ b/7-animation/3-js-animation/2-animate-ball-hops/task.md
@@ -8,6 +8,6 @@ Faça a bola quicar para a direita. Assim:
 
 [iframe height=250 src="solution"]
 
-Escreva o código de animação. A distância para a esquerda é `100px`.
+Escreva o código da animação. A distância para a esquerda é `100px`.
 
-Use a solução da atividade anterior <info:task/animate-ball> como a fonte.
+Use a solução da atividade anterior <info:task/animate-ball> como fonte.
diff --git a/7-animation/3-js-animation/text.view/index.html b/7-animation/3-js-animation/text.view/index.html
index 03253a2a2..ff1f7f682 100644
--- a/7-animation/3-js-animation/text.view/index.html
+++ b/7-animation/3-js-animation/text.view/index.html
@@ -10,12 +10,12 @@
 <body>
   <textarea id="textExample" rows="5" cols="60">
     Ele pegou sua espada vorpal na mão:
-    Faz tempo que o manxome inimigo que ele procurava -
+    Faz tempo que o inimigo manxome que ele procurava -
     Então ele descansou perto da árvore Tumtum,
     E ficou um pouco em pensamento.
   </textarea>
 
-  <button onclick="animateText(textExample)">Run the animated typing!</button>
+  <button onclick="animateText(textExample)">Execute o texto animado!</button>
 
   <script>
     function animateText(textArea) {
@@ -26,7 +26,7 @@
       animate({
         duration: 5000,
         timing: bounce,
-        draw: function(progress) {
+        draw: function (progress) {
           let result = (to - from) * progress + from;
           textArea.value = text.substr(0, Math.ceil(result))
         }
@@ -43,4 +43,4 @@
   </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file

From e6ffa4332c473e44d515a67571bfca8b8a04ce27 Mon Sep 17 00:00:00 2001
From: Samantha Vale <karlasamantha@gmail.com>
Date: Thu, 26 Jan 2023 13:11:10 -0800
Subject: [PATCH 6/7] fix: addresses remaining feedback

---
 7-animation/3-js-animation/article.md | 42 +++++++++++++--------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/7-animation/3-js-animation/article.md b/7-animation/3-js-animation/article.md
index ebb5bb212..3e36a53b7 100644
--- a/7-animation/3-js-animation/article.md
+++ b/7-animation/3-js-animation/article.md
@@ -14,8 +14,8 @@ O pseudo-código pode ficar assim:
 
 ```js
 let timer = setInterval(function() {
-  if (animation complete) clearInterval(timer);
-  else increase style.left by 2px
+  if (animação completa) clearInterval(timer);
+  else incremente style.left em 2px
 }, 20); //aumenta 2px a cada 20ms, em média 50 quadros por segundo
 ```
 
@@ -38,8 +38,8 @@ let timer = setInterval(function() {
 
 }, 20);
 
-// timePassed vai de 0 a 2000
-// recebe valores de 0 a 400px
+// enquanto timePassed vai de 0 a 2000
+// 'left' recebe valores de 0 a 400px
 function draw(timePassed) {
   train.style.left = timePassed / 5 + 'px';
 }
@@ -75,9 +75,9 @@ setInterval(animate2, 20); // em diferentes lugares do script
 setInterval(animate3, 20);
 ```
 
-Esses diferentes redesenhos deveriam ser agrupados juntos, para fazer com o que o redesenho seja mais fácil para o navegador (e, portanto, mais suave para as pessoas).
+Esses diferentes redesenhos deveriam ser agrupados juntos, para fazer com o que o redesenho seja mais fácil para o navegador e, portanto, menos carga sobre a CPU e mais suave para as pessoas.
 
-Tem mais uma coisa a ser manter em mente. Às vezes, quando a CPU está sobrecarregada, ou quando existem outras reazões para resesenhar com menos frequência (como quando a aba do navegador está escondida), então não devemos executá-la a cada `20ms`.
+Tem mais uma coisa a se manter em mente. Às vezes, quando a CPU está sobrecarregada, ou quando existem outras reazões para resesenhar com menos frequência (como quando a aba do navegador não está visível), então não devemos executá-la a cada `20ms`.
 
 Mas como sabemos disso em JavaScript? Existe uma especificação [Tempo de animação](http://www.w3.org/TR/animation-timing/) que fornece a função `requestAnimationFrame`. Ela aborda todos esses problemas e mais.
 
@@ -149,7 +149,7 @@ Função `animate` aceita 3 parâmetros que essencialmente descrevem a animaçã
 : Tempo total da animação. Exemplo, `1000`.
 
 `timing(timeFraction)`
-: Função de tempo, como a propriedade CSS `transition-timing-function` que recebe a fração de tempo percorrido (`0` no início, `1` no final) e retorna a conclusão da animação (como `y` na curva de Bezier).
+: Função de tempo, tal como a propriedade CSS `transition-timing-function` que recebe a fração de tempo percorrido (`0` no início, `1` no final) e retorna a conclusão da animação (como `y` na curva de Bezier).
 
     Por exemplo, uma função linear significa que a animação continue uniformemente com a mesma velocidade:
 
@@ -227,7 +227,7 @@ Veja em ação (clique para ativar):
 
 [iframe height=40 src="quad" link]
 
-...Ou a curva cúbica ou evento maior que `n`. Aumentar a potência faz com que acelere mais rapidamente.
+...Ou a curva cúbica ou até um `n` maior. Aumentar a potência faz com que acelere mais rapidamente.
 
 Aqui está o gráfico para `progress` na potência `5`:
 
@@ -312,7 +312,7 @@ Em ação para `x=1.5`:
 
 [iframe height=40 src="elastic" link]
 
-## Reversão: ease\*
+## Reversão: ease*
 
 Então temos uma coleção de funções de tempo. Sua aplicação direta é chamada "easeIn".
 
@@ -326,7 +326,7 @@ No modo de "eastOut", a função `timing` é envoltada pela `timingEaseOut`:
 timingEaseOut(timeFraction) = 1 - timing(1 - timeFraction)
 ```
 
-Em outras palavras, temos uma função de "transformar" `makeEaseOut` que recebe a função de tempo "regular" e retorna a função que a envolve:
+Em outras palavras, temos uma função "transformar" `makeEaseOut` que recebe a função de tempo "regular" e retorna a função que a envolve:
 
 ```js
 // aceita a função de tempo, returna a variante transformada
@@ -353,16 +353,16 @@ Aqui podemos ver como a transformação muda o comportamento da função:
 
 Se existe um efeito de animação no início, como quique -- será mostrado no final.
 
-No gráfico acima, <span style="color:#EE6B47">quique regular</span> tem a cor vermelha, e <span style="color:#62C0DC">quique easeOut</span> é azul.
+No gráfico acima, o <span style="color:#EE6B47">quique regular</span> tem a cor vermelha, e o <span style="color:#62C0DC">quique easeOut</span> é azul.
 
 - Quique regular -- o objeto salta na parte inferior, e no final pula abruptamente para o topo.
-- Depois `easeOut` -- ele pula no começo, depois quica naquele lugar.
+- Depois de `easeOut` -- ele primeiro pula para o topo, e depois quica naquele lugar.
 
 ### easeInOut
 
 Podemos também mostrar o efeito tanto no começo quanto no final da animação. A transformação é chamada "easeInOut".
 
-Dado a função de tempo, calculamos o estado de animação assim:
+Dada a função de tempo, calculamos o estado de animação assim:
 
 ```js
 if (timeFraction <= 0.5) { // primeira metade da animação
@@ -372,7 +372,7 @@ if (timeFraction <= 0.5) { // primeira metade da animação
 }
 ```
 
-O código do wrapper:
+O código da envolvente:
 
 ```js
 function makeEaseInOut(timing) {
@@ -393,13 +393,13 @@ Em ação, `bounceEaseInOut`:
 
 A transformaçào "easeInOut" une dois gráficos em um: `easeIn` (regular) para a primeira metade da animação e `easeOut` (invertida) -- para a segunda parte.
 
-O efeito é claramente visto se compararmos os gráficos de `easeIn`, `easeOut` e `easeInOut` da função `circ`:
+O efeito é claramente visto se compararmos os gráficos de `easeIn`, `easeOut` e `easeInOut` da função de tempo `circ`:
 
 ![](circ-ease.svg)
 
-- <span style="color:#EE6B47">Red</span> é a variante regular de `circ` (`easeIn`).
-- <span style="color:#8DB173">Greed</span> -- `easeOut`.
-- <span style="color:#62C0DC">Blue</span> -- `easeInOut`.
+- <span style="color:#EE6B47">Vermelho</span> é a variante regular de `circ` (`easeIn`).
+- <span style="color:#8DB173">Verde</span> -- `easeOut`.
+- <span style="color:#62C0DC">Azul</span> -- `easeInOut`.
 
 Como podemos ver, o gráfico da primeira metade da animação é a reduzida `easeIn`, e a segunda metade é a reduzida `easeOut`. Como resultado, a animação começa e termina com o mesmo efeito.
 
@@ -407,13 +407,13 @@ Como podemos ver, o gráfico da primeira metade da animação é a reduzida `eas
 
 Ao invés de mover o elemento, podemos fazer outra coisa. Tudo o que precisamos é escrever a `draw` apropriada.
 
-Aqui está o texto animato "quicando":
+Aqui está o texto animado "quicando":
 
 [codetabs src="text"]
 
 ## Resumo
 
-Para animação que CSS não lida bem, ou aquelas que precisam de controle rígido, JavaScript pode ajudar. Animações JavaScript devem ser implementadas via `requestAnimationFrame`. Esse método embutido permite configurar uma callback para que seja executada quando o navegador estiver preparando uma repintura. Geralmente é bem breve, mas o tempo exato depende do navegador.
+Para animação que CSS não lida bem, ou aquelas que precisam de controle rígido, JavaScript pode ajudar. Animações com JavaScript devem ser implementadas via `requestAnimationFrame`. Esse método embutido permite configurar uma callback para que seja executada quando o navegador estiver preparando uma repintura. Geralmente é bem breve, mas o tempo exato depende do navegador.
 
 Quando uma página está em segundo plano, não ocorrem repinturas, então a callback não será executada: a animação será suspensa e não consumirá recursos. Isso é ótimo.
 
@@ -449,6 +449,6 @@ Opções:
 
 Certamente poderíamos melhorá-las, adicionar mais recursos adicionais supérfluos, mas animações JavaScript não são aplicadas no dia-a-dia. Elas são usadas para fazer coisas mais interessantes e não-padrão. Então você gostaria de adicionar novas funcionalidades quando precisa delas.
 
-Animações JavaScript podem usar qualquer função de tempo. Cobrimos muitos exemplos e transformações para fazê-las ainda mais versáteis. Ao contrário de CSS, não estamos limitados às curvas de Bezier.
+Animações com JavaScript podem usar qualquer função de tempo. Cobrimos muitos exemplos e transformações para fazê-las ainda mais versáteis. Ao contrário de CSS, não estamos limitados às curvas de Bezier.
 
 É o mesmo com `draw`: podemos animar qualquer coisa, não só propriedades CSS.

From 4d4df64abb32b93771800cb65982524a32fd02db Mon Sep 17 00:00:00 2001
From: Samantha Vale <karlasamantha@gmail.com>
Date: Thu, 26 Jan 2023 13:15:08 -0800
Subject: [PATCH 7/7] fix: fixes conflicts

---
 7-animation/3-js-animation/article.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/7-animation/3-js-animation/article.md b/7-animation/3-js-animation/article.md
index 3e36a53b7..4be1ef92d 100644
--- a/7-animation/3-js-animation/article.md
+++ b/7-animation/3-js-animation/article.md
@@ -283,7 +283,7 @@ A função `bounce` faz o mesmo, mas em ordem reversa: o "quique" começa imedia
 
 ```js
 function bounce(timeFraction) {
-  for (let a = 0, b = 1, result; 1; a += b, b /= 2) {
+  for (let a = 0, b = 1; 1; a += b, b /= 2) {
     if (timeFraction >= (7 - 4 * a) / 11) {
       return -Math.pow((11 - 6 * a - 11 * timeFraction) / 4, 2) + Math.pow(b, 2)
     }