title: Javascript Animation not working as expected
body: <p>I'm trying to put JavaScript animations into this webpage, however it does not behave as expected. I've recorded <a href="https://youtu.be/HUuKTppha68" rel="nofollow noreferrer">a video of it</a>, and put the code here for you to view. The behaviour present in the 2nd and 3rd refresh in the video is what I'm looking for. And by the way, the entire HTML is moving when I inspect it, but JavaScript says it's not. Please explain why this might be happening.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  
  &lt;html id="HTML" style="
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      overflow: hidden;
  "&gt;
      &lt;head&gt;
          &lt;title&gt;Owen's Website&lt;/title&gt;
          
          &lt;link rel="stylesheet" href="MainStyle.css"&gt;
          
          &lt;link rel="icon" href="favicon.ico"&gt;
      &lt;/head&gt;
      
      &lt;body id="BODY" style="
          width: 100%;
          height: 100%;
          margin: 0px;
      "&gt;
          &lt;div style="
              width: 100%;
              height: 100%;
              display: grid;
              grid-template-columns: 80% 20%;
              grid-template-rows: 100%;
          "&gt;
              &lt;div id="NavigationPane" style="
                  grid-column: 2 / span 1;
                  grid-row: 1 / span 1;
                  border-style: solid;
                  border-width: 5px;
                  position: relative;
              "&gt;
                  &lt;div class="centeredtext" style="width: 100%; height: 15%;"&gt;
                      &lt;h3 style="margin: 0px;"&gt;&lt;u&gt;Navigation Pane&lt;/u&gt;&lt;/h3&gt;
                  &lt;/div&gt;
                  &lt;div class="centeredtext" style="width: 100%; height: 85%;"&gt;
                      Not yet implemented.
                  &lt;/div&gt;
                  &lt;button id="NavToggle" type="button" style="
                      position: relative;
                      top: -100%;
                  "&gt;Toggle&lt;/button&gt;
              &lt;/div&gt;
              &lt;div style="
                  grid-column: 1 / span 1;
                  grid-row: 1 / span 1;
              "&gt;
                  &lt;div id="Greeting" class="centeredtext" style="
                      height: 6em;
                      color: white;
                      background-color: blue;
                      position: relative;
                      top: -6em;
                  "&gt;
                      &lt;h1&gt;Welcome to my website!&lt;/h1&gt;
                  &lt;/div&gt;
                  
                  &lt;div id="MainText" style="
                      width: calc(100% - 20px);
                      height: calc(100% - 6em - 20px);
                      margin: 10px;
                      position: relative;
                      top: 100%;
                  "&gt;
                      &lt;p&gt;
                          My name is Owen, and this is my website. I just put whatever here, games, experiments, pictures etc.&lt;br&gt;
                          &lt;br&gt;
                          I also like to keep updating this page as my skill with HTML increases, so don't be surprised if it changes.&lt;br&gt;
                          By the way, everything in this website is &lt;b&gt;&lt;i&gt;100% Manually Coded.&lt;/i&gt;&lt;/b&gt; (Except for games, because they're made in unity)
                      &lt;/p&gt;
                      &lt;p style="
                          margin-top: 10px;
                          padding-top: 10px;
                          border-top-style: solid;
                          border-width: 3px;
                          border-color: black;
                      "&gt;
                          &lt;a href="Experiments/Counter/index.html"&gt;Counter&lt;/a&gt;&lt;br&gt;
                          &lt;a href="Downloads/index.html"&gt;File Downloads&lt;/a&gt;
                      &lt;/p&gt;
                      &lt;p style="
                          margin-top: 10px;
                          padding-top: 10px;
                          border-top-style: solid;
                          border-width: 3px;
                          border-color: black;
                      "&gt;
                          &lt;h3 style="margin: 0px;"&gt;Thanks for visiting!&lt;/h3&gt;
                      &lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;script type="application/javascript"&gt; /* Start-up animations */
              const Greeting = document.getElementById("Greeting");
              const NavPane = document.getElementById("NavigationPane");
              const MainText = document.getElementById("MainText");
              
              const NavPaneAnimation = setInterval(Animation1, 10);
              var GreetingAnimation = setInterval(Animation21, 10);
              const TextAnimation = setInterval(Animation3, 10);
              let CounterA = 0
              let CounterB = 0
              let CounterC = 0
              function Animation1() {
                  if (CounterA == 100) {
                      clearInterval(NavPaneAnimation);
                      NavPane.style.left = "0px";
                  } else {
                      CounterA++;
                      NavPane.style.left = 100 - 100 * Math.sin(Math.PI / 180 * (CounterA / 100 * 90)) + "%";
                  }
              }
              function Animation21() {
                  if (CounterB == 50) {
                      clearInterval(GreetingAnimation);
                      Greeting.style.top = "0px";
                      CounterB = -50;
                      GreetingAnimation = setInterval(Animation22, 10);
                  } else {
                      CounterB++;
                      Greeting.style.top = -(6 - 6 * Math.sin(Math.PI / 180 * (CounterB / 50 * 90))) + "em";
                  }
              }
              function Animation22() {
                  if (CounterB == 50) {
                      clearInterval(GreetingAnimation);
                      Greeting.style.left = "0px";
                  } else {
                      CounterB++;
                      if (CounterB &gt;= 0) {Greeting.style.left = 5 * Math.abs(Math.sin(Math.PI / 180 * (CounterB / 50 * 360))) + "%";}
                  }
              }
              function Animation3() {
                  if (CounterC == 100) {
                      clearInterval(TextAnimation);
                      MainText.style.top = "0px";
                  } else {
                      CounterC++;
                      MainText.style.top = 100 - 100 * Math.abs(Math.sin(Math.PI / 180 * (CounterC / 100 * 90))) + "%";
                  }
              }
          &lt;/script&gt;
          
          &lt;script&gt;
              setInterval(Loop, 10)
              function Loop() {
                  console.log(document.getElementById("BODY").offsetTop);
              }
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>