title: Moving a paragraph from left edge of a div to right edge in ES6 (text should be deleted and reappear)
body: <p>Sorry if I misphrase anything, not sure how to phrase the need I'm having.</p>
  
  <p>Say I have a paragraph inside a div:</p>
  
  <pre><code>&lt;div style="width: 50px"&gt;
      &lt;p&gt;Hi&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <ol>
  <li>I want to move the paragraph (which covers 0-2px), up until the 50px. </li>
  <li>When it reaches 49/50, 1 letter will be gone.</li>
  <li>When it reaches 50/50, all 2 letters be gone, and the same behavior will start again, from scratch...</li>
  </ol>
  
  <p>To clarify: I mean to create these "old school" moving text bars, in which a text starts in the right edge of the bar, and moves pixel after pixel, in some speed, to the left edge, disappears, and again the same pattern.</p>
  
  <p>I didn't find any code for "moving a text" (surly not in ES6)<a href="https://stackoverflow.com/questions/44617545/moving-an-element-in-js"> [1]</a>,<a href="https://stackoverflow.com/questions/25352760/how-to-make-object-move-in-js"> [2]</a>. Most of what I found is in Jquery, like <a href="http://download.remysharp.com/marquee.html" rel="nofollow noreferrer">this article</a>, but I desire an ES6 vanilla solution.</p>