JSFiddle - React, Tailwind, and code Playground
HTML
<h1 class="test">test</h1>
CSS
.test {
background-color: #f9333c;
width: 100%;
height: 100%;
transform: translateX(0%);
}
JavaScript
//Get the element you want to animate
var testElement = $('.test');
function run(v){
//Reverse the array
var reversed = JSON.parse(JSON.stringify(v)).reverse();
$(v[0]).animate(v[1], {
duration: 500,
step: function(val) {
//Adding the transform to your element
testElement.css("transform", `translateX(${val}px)`);
},
done: function(){
//Re-running the function but in reverse with the reverse we did above.
run(reversed)
}
})
};
run([{y:0}, {y:100}])