The best way to implement crawler html template

template
html

#1

I’m implementing running-letter text(crawler) with a html template. But after all there are still some kind of lag every second. Maybe there are some another ways to create this? In the browser template works quite smoothly

Code sample, func for moving text:

window.addEventListener('load', function(){
var firstCaption = document.getElementsByClassName('firstcaption');
var step1 = firstCaption[0];
var parent = step1.parentNode;
var initialWidth = parent.clientWidth;

var width = step1.clientWidth;

window.addEventListener('resize', function(){
    width = step1.clientWidth;
});

var left = width;
window.setInterval(function(){
    left-=1;
    (left<-width) && (left = initialWidth);
    step1.style.left = left + 'px';
}, 8);
});

#2

Use requestAnimationFrame instead of the interval and translate instead of style.left.


#3

Thank you. But it works the same way. Better in the browser, but not in caspar, will try to use another type of templates.