title: Is it possible to smooth text change in JavaScript
body: <p>I was working on a content changing click feature with JavaScript and jQuery and it works but is clunky. Is there anyway to make this transition smoother within JS or jQuery?</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-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $("h1").click(function() {
      if (document.getElementById("frst_hd").innerHTML === "World") {
        document.getElementById("frst_hd").innerHTML = "Hello";
      } else {
        document.getElementById("frst_hd").innerHTML = "World";
      }
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Example&lt;/title&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;h1 id="frst_hd"&gt;Hello&lt;/h1&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I'm pretty new in this language so I'm sorry if this issue is easy to solve. Thanks for your help</p>