[Solved] jQuery transform animate translation to pure JavaScript

by


I struggled with this problem before I posted the question, and I continued to work on it after I posted. I in fact tried the eventual solution before, but incorrectly.
My CSS is a little more general then the M. Lak (sanwebcorner.com) example. I want to be able to define multiple marquees with different widths.

<style type="text/css">
.gc-marquee {
  min-height: 28px;
  overflow: hidden;
  position: relative;
}
.gc-marquee > .gc-scrollingtext {
  white-space: nowrap;
  position: absolute;
}
</style>

For rendering the marquee I wanted the duration/speed to be encoded, so I used a data attribute. The text can be any number of HTML tags.

  <div class="gc-marquee" id="marq-1" style="height: 80px;background-color: black;color: #dddddd;">
    <h3 class="gc-scrollingtext" data-millisec="16000" style="margin: 15px auto;font-weight: bold;">Short marquee text!</h3>
  </div>

Finally, the real problem is the JavaScript. I was confused by pure CSS marquees. I eventually understood the problem and got beyond the syntax.

<script>
  var marqueesToShowOnce = document.querySelectorAll( 'div.gc-marquee > .gc-scrollingtext' );
  function gc_marquee_loop( gc_marquee, millisec, txtWidth, parWidth ) {
    if( gc_marquee == undefined || gc_marquee == null || millisec < 1000 ) {
      console.log( `gc_marquee_loop: ERROR, ${millisec} ${txtWidth} ${parWidth}` );
      return;
    }
    setTimeout( function( ) {
      gc_marquee.animate( [{ right: -txtWidth + 'px' }, { right: parWidth + 'px' }],
        { duration: millisec } );
      gc_marquee_loop( gc_marquee, millisec, txtWidth, parWidth );
    }, millisec );
  }
  if( marqueesToShowOnce.length > 0 ) {
    Array.prototype.forEach.call(marqueesToShowOnce, function( gc_marquee ) {
      var millisec = parseInt( gc_marquee.dataset.millisec );
      var txtWidth = gc_marquee.offsetWidth;
      var parWidth = gc_marquee.parentElement.offsetWidth;
      gc_marquee.animate( [{ right: -txtWidth + 'px' }, { right: parWidth + 'px' }],
        { duration: millisec } );
      gc_marquee_loop( gc_marquee, millisec, txtWidth, parWidth );
    } );
  }
</script>

The marquee works quite well, and now I can avoid the overhead of jQuery and use pure JavaScript.

solved jQuery transform animate translation to pure JavaScript