I have an element that utilizes css clip-path. By using jquery, I am able to adjust the clip-path points based on the cursor's X-coordinate position.
While my code functions well, I am looking to add a smoother and slower transition to this "animation" even when the cursor moves rapidly.
Is there a way I can accomplish this? Thank you for your assistance.
$(document).mousemove(function(getCurrentPos){
var clip = $(".element");
//x coordinates
var xCord = getCurrentPos.pageX;
//calculate %
xPercent = xCord / $(document).width() * 100;
var left = 90 + 10 * (xPercent / 100);
var right = 100 - 10 * (xPercent / 100);
$(".element").css('clip-path', 'polygon(0% 0%, 100% 0%, 100% ' + left + '%, 0% ' + right + '%)');
});.element {
background:red;
width:500px;
height:150px;
clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 90%);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="element"></div>