Is it possible to animate the css clip-path property using jQuery?

Question

I have some elements whose properties are altered via the jQuery animate() method like that:

$('#mySidenav').animate({"width": '-=190'});
$('#main_address').animate({"padding-left": '-=190'});
$('.oberflaeche').animate({'margin-left':'-=190'});

Additionally I have another absolute positioned element within the .oberflaeche element which needs to be extended after the content moves to the left due to the operations named above in order to still properly fit into its container.

To do so I use the css property clip-path which works fine:

clip-path: inset(0px var(--clipSize) 0px 0px);

The only problem that occurs is that I have to alter the clip-path property dynamically as the window sizes are differing. Currently I am doing that via class-based css as I am not sure if it is possible with jQuery. Because of the different approaches (jQuery vs. css) the two effects are not being displayed simultaneously - the css clip-path effect is incongruous. I already tried to cover that problem using the transition-delay property as well as a transition-timing-function but I had no luck.

So the question is: Is it possible to animate the clip-path property like it can be done with the css properties of width or padding to achieve a consistent effect? I am looking for something like

$('#dynamic_element').animate({'clip-path': 'inset(0px '+variable_pixel+' 0px 0px)'});

which I can call where I also call the other animations.

Any help is highly appreciated. Thanks in advance!

Answer 1

Based on georg's proposal (see: https://stackoverflow.com/a/16857838/7323120) I was able to figure it out myself. Using the animate method you can iterate over custom value ranges and adjust the respective css in the method's callback like:

$({step: 0}).animate({step: 80}, {
   step: function(val) {
      // val equals the current step
      $('#target').css('clip-path', "inset(0px "+val+"px 0px 0px)")
   }
});