JSFiddle - React, Tailwind, and code Playground
by GMK Hussain
HTML
<div class="slide-grp">
<div class="mover" data-start="0" data-end="400" data-prop="margin-left">ClientCommunication</div>
<div class="mover" data-start="20" data-end="100" data-prop="height">Sufyan Haqqui</div>
<div class="mover" data-start="200" data-end="0" data-speed="110" data-prop="margin-left">Word Press</div>
</div>
CSS
div{
width:auto;
border:1px solid #ccc;
}
JavaScript
var p = 0;
function start(){
$('.mover').each(function(){
var $t = $(this);
console.log($t.data('start')+($t.data('end')-$t.data('start'))/1000*p);
$t.css($t.data('prop'),$t.data('start')+($t.data('end')-$t.data('start'))/100*p);
});
if(p<100){
p++;
setTimeout(start,Math.round(Math.random()*5));
}
}
start();