Animate image arrow like speedometer in JS

Question

I have this current UI

The arrow image is just a transparent image.

I'm trying to add animation on that image.

it will just move from low to high for every page reload / after the page being loaded.

My idea to do this is using jquery

I'm playing around with this code

 <img class="meter-arrow" src="{!! url('public/images/arrow.png') !!}" >
  
  <script src="{{url('public/js/libraries/jquery_file_3_1.js')}}"></script>
  <script>
    $(".meter-arrow").animate({left: '250px'});
   </script>

Source: https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation1

Is it possible to do this

score 1 · Answer 1 · answered Mar 12 '21 at 02:15

1

Animations like this are also possible through CSS. See this StackBlitz example.

Reference of tranfsorm https://www.w3schools.com/cssref/css3_pr_transform.asp

answered Mar 12 '21 at 02:15

Stefan

160
6

score 1 · Accepted Answer · answered Mar 12 '21 at 02:44

It is strangely quite hard to animate a rotation using jQuery. See here about how.

I think it is easier in plain JS:

// The image element
let arrow = document.querySelector(".arrow")

// It onload --rotation value
let rotation = parseInt(getComputedStyle(arrow).getPropertyValue("--rotation"))

// Rotation on an interval
let increase = setInterval(function(){
  rotation = (rotation>25) ? clearInterval(increase) : rotation+1
  arrow.style.setProperty("transform", `rotate(${rotation}deg`)
},20)

.arrow{
  --rotation: -90deg;
  margin: 5em;
  height: 160px;
  width: 150px;
  transform: rotate(var(--rotation));
  transform-origin: 68px 118px;  /* the position of the rotation point in the image */
}

<img src="https://i.imgur.com/crRJmHg.png" class="arrow">

Animate image arrow like speedometer in JS

2 Answers2