JSFiddle - React, Tailwind, and code Playground

HTML

<div id="homeSponsorsContainer">
		<div id="homeSponsorsContent">
			 <div class="scroller">
				<ul>
					<li><img src="<?php echo $siteurl;?>/images/abplogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/ansellogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/balfourlogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/beallogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/nhslogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/consortlogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/brocklesbylogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/bupalogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/greenergylogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/hullcitylogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/wittlogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/outredlogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/omglogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/manchesterlogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/northumbrialogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/mimaslogo.png"></li>
				</ul>
			 </div>
			 
			 <div class="scrollerTwo">
				 <ul>
					<li><img src="<?php echo $siteurl;?>/images/abplogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/ansellogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/balfourlogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/beallogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/nhslogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/consortlogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/brocklesbylogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/bupalogo.png"></li>
					<li><img src="<?php echo $siteurl;?>/images/greenergylogo.png"></li>
					<li><img src="<?php echo...

CSS

#homeSponsorsContainer{position:relative;background:#494949;padding: 0px 20px;}
#homeSponsorsContent{position:relative;max-width: 960px;margin: 0px auto;padding: 60px 0px 60px 0px;color:#FFF;font-size:0px;line-height: 20px;text-align: center;width:100%!important;overflow: hidden;}
img{display: inline-block;vertical-align: middle;margin-bottom: 20px;width: auto;height: 45px;}
ul{height: 60px;position: relative;overflow: hidden;}
li{position:relative;float:left;padding: 0px 20px;height: auto!important;width: auto!important}
.scroller{position:absolute;left:0px;top:30px;}
.scrollerTwo{position:absolute;top:30px;}

JavaScript

var scrollerwidth = 0;

$(window).load(function () {
	$('.scroller ul li').each(function() {
	    scrollerwidth += ($(this).width() + 40);
	});
	$(".scrollerTwo").css({left: scrollerwidth});
	ulScrolls();
});

function ulScrolls(){
	$(".scroller, .scrollerTwo").animate({'left': '-=10px'}, 100);
	ulScrolls();
}

$(document).ready(function() {
	var scrollertwoleft = $(".scrollerTwo").offset().left; 
	scrollertwoleft = parseInt(scrollertwoleft, 10);
	scrollerwidth = parseInt(scrollerwidth, 10);
	if(scrollertwoleft <= 100){
		$(".scroller").css({left: scrollerwidth});
		alert("test");
	}else{
		alert(scrollertwoleft);
	}
});