htmlcssclip-path

clip-path change in runtime in Javascript

I am able to change the clipPath property of an element at runtime. But I am not able to change the property value using a variable incremented in timer.

How to allocate the value of x to these two parameters of polygon in bold below ?

el.style.clipPath = "polygon(10% 0%, 100% 0, 100% 100%, 10% 100%)";

var x = 0;

function myTimer() 
{
    var el = document.getElementById("Screen_1_Dial_Left_LOW_slider_ID");
    el.style.clipPath = "polygon(10% 0%, 100% 0, 100% 100%, 10% 100%)";
    x++;
}
Solution

  • You can use string interpolation, like this:

    var x = 0;

function myTimer() 
{
    var el = document.getElementById("Screen_1_Dial_Left_LOW_slider_ID");
    el.style.clipPath = `polygon(${x}% 0%, 100% 0%, 100% 100%, ${x}% 100%)`;
    x++;
}