How to animate the element in jquery

Question

I am trying to animate my element using jquery. The purpose of the code is to be a speedometer on my server The element I am trying to animate is called box3

NOTE: Code might not look the same for you as it looks for me. The code is running on FiveM Server

if (data.akcija == "spidometar") {

    $(".box-tekstic").html(Math.round(data.speed))
    if (data.speed > 0) {
      $("#SpeedIndicator").text(data.speed);
      let multiplier = data.maxspeed * 0.1;
      let SpeedoLimit = data.maxspeed + multiplier;
      Speedometer = (data.speed / SpeedoLimit);
    }
}

.box-float{
    position: relative;
    right: 5vh;
    top: 34vh;
}

.box {
  
    --v:calc( ((18/5) * var(--p) - 90)*1deg);
    position: absolute;
    width:180px;
    height:180px;
    transform: rotate(160deg);
    border-radius:50%;
    padding:25px;
    background:
      linear-gradient(var(--v), transparent 50%,#4c4c4e        0) 0/min(100%,(var(--p) - 50)*100%),
      linear-gradient(to right, transparent 50%, #4c4c4e 0);
    -webkit-mask:
      linear-gradient(var(--v), #f2f2f2     50%,transparent 0) 0/min(100%,(50 - var(--p))*100%),
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite:destination-out;
    mask-composite:exclude;
  }

.box2 {

  --v:calc( ((18/5) * var(--p) - 90)*1deg);
  position: absolute;
  width:170px;
  left: 0.4vh;
  top: 5;
  height:170px;
  transform: rotate(160deg);
  border-radius:50%;
  padding:12px;
  background:
    linear-gradient(var(--v), transparent 50%,#8a8989        0) 0/min(100%,(var(--p) - 50)*100%),
    linear-gradient(to right, transparent 50%, #8a8989 0);
  -webkit-mask:
    linear-gradient(var(--v), #f2f2f2     50%,transparent 0) 0/min(100%,(50 - var(--p))*100%),
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:destination-out;
  mask-composite:exclude;
}

.box3 {
  
  --v:calc( ((18/5) * var(--p) - 90)*1deg);
  position: absolute;
  left: 0.4vh;
  top: 5;
  width:170px;
  height:170px;
  transform: rotate(160deg);
  border-radius:50%;
  padding:12px;
  background:
    linear-gradient(var(--v), transparent 50%,#b7ff00        0) 0/min(100%,(var(--p) - 50)*100%),
    linear-gradient(to right, transparent 50%, #b7ff00 0);
  -webkit-mask:
    linear-gradient(var(--v), #f2f2f2     50%,transparent 0) 0/min(100%,(50 - var(--p))*100%),
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:destination-out;
  mask-composite:exclude;
}

<div class="box-float">
    <div class="box" style="--p:68;"></div>
    <div class="box2" style="--p:68;"></div>
    <div class="box3" style="--p:50;"></div>
</div>

Answer 1

I know this is not directly answering your question. But I would highly recommend not using JQuery. It served a long and useful life, but there are a lot new, efficient and less bloated libraries available today.

For doing Animation with JS, I recommend checking out https://animejs.com/

Here is an example codepen https://codepen.io/borntofrappe/pen/qGozVM

const clockFace = document.querySelector('svg g.clock--face');
// add the twelve numbers by rotating, translating and then rotating back text elements
// ! add a zero to the numbers smaller than 10 through the utility function
for (let i = 0; i < 12; i += 1) {
  clockFace.innerHTML += `
    <text
        transform="rotate(${-90 + 30 * (i + 1)}) translate(34 0) rotate(${90 - 30 * (i + 1)})" >
        ${zeroPadded(i + 1)}
    </text>
  `;
}

If you have to use jQuery then just use something like.

codepen.io/rpandrews/pen/zaxNyK

$('speedElement').css("transform", "rotate(" + speed_Angle_Variable + ")");

or

// not sure what element is what, since not displaying properly with run code
$('.box-float .box').css("--p", speed_Angle_Variable);

(function($) {

  function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }

  $(document).ready(function() {


    let data = {
      akcija: "spidometar",
      speed: 50,
      maxspeed: 68
    }


    if (data.akcija == "spidometar") {

      $(".box-tekstic").html(Math.round(data.speed))
      if (data.speed > 0) {
        $("#SpeedIndicator").text(data.speed);
        let multiplier = data.maxspeed * 0.1;
        let SpeedoLimit = data.maxspeed + multiplier;
        Speedometer = (data.speed / SpeedoLimit);
      }
    }

    function changeSpeed(target, data) {
      setTimeout(function() {
        if (target < data.speed)
          data.speed--;
        if (target > data.speed)
          data.speed++;
        $('.box-float .box3').css("--p", data.speed + '');

        if (target != data.speed) { 
          changeSpeed(target, data );
        } 
      }, 100)

    }
    
    changeSpeed(25, data);

  });

})(jQuery);

.box-float {
  position: relative;
  left: 5vh;
  top: 34vh;
}

.box {
  --v: calc( ((18/5) * var(--p) - 90)*1deg);
  position: absolute;
  width: 180px;
  height: 180px;
  transform: rotate(160deg);
  border-radius: 50%;
  padding: 25px;
  background: linear-gradient(var(--v), transparent 50%, #4c4c4e 0) 0/min(100%, (var(--p) - 50)*100%), linear-gradient(to right, transparent 50%, #4c4c4e 0);
  -webkit-mask: linear-gradient(var(--v), #f2f2f2 50%, transparent 0) 0/min(100%, (50 - var(--p))*100%), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

.box2 {
  --v: calc( ((18/5) * var(--p) - 90)*1deg);
  position: absolute;
  width: 194px;
  left: 1.6vh;
  top: 6px;
  height: 193px;
  transform: rotate(160deg);
  border-radius: 50%;
  padding: 12px;
  background: linear-gradient(var(--v), transparent 50%, #8a8989 0) 0/min(100%, (var(--p) - 50)*100%), linear-gradient(to right, transparent 50%, #8a8989 0);
  -webkit-mask: linear-gradient(var(--v), #f2f2f2 50%, transparent 0) 0/min(100%, (50 - var(--p))*100%), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

.box3 {
  --v: calc( ((18/5) * var(--p) - 90)*1deg);
  background: linear-gradient(var(--v), transparent 50%, #b7ff00 0) 0/min(100%, (var(--p) - 50)*100%), linear-gradient(to right, transparent 50%, #b7ff00 0);
  -webkit-mask: linear-gradient(var(--v), #f2f2f2 50%, transparent 0) 0/min(100%, (50 - var(--p))*100%), linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box-float">
  <div class="box" style="--p:68;"></div>
  <div class="box2" style="--p:68;"></div>
  <div class="box2 box3" style="--p:50;"></div>
</div>