Meter dial animated on view port.

view img:- 

Html:-

 <div class="factMeterBody">

                    <div class="bidFactBdy meterFct">

                        <div class="meterFt">

                          <div class="fact__meter"><span class="meter__arrow" data-meter="1"></span></div>

                        </div>

                    </div>    

                </div>

                       

css:-

.factMeterBody {

    width: 48%;

    margin-left: 35px;

  }

.bidFactBdy {

    width: 100%;

    height: auto;

    display: flex;

    flex-wrap: wrap;

}

.factMeterBody .bidFactBdy.meterFct {

    height: 100%;

}

.meterFt {

    width: 440px;

    height: auto;

    margin-right: 20px;

    margin: 0 auto;

    border-bottom: 1px solid #545454;

    padding-bottom: 20px;

    margin-bottom: 15px;

}

.fact__meter {

    max-width: 100%;

    margin: 0 auto;

    background: url(../../img/meter_arrow.png) no-repeat 0 0;

    width: 100%;

    height: 225px;

    background-size: 100%;

    position: relative;

    background-color: #000;

}

.fact__meter .meter__arrow {

    background: url(../../img/meter_arrow.png) no-repeat 0 0;

    width: 172px;

    height: 98px;

    display: block;

    position: absolute;

    bottom: 0px;

    left: calc(50% - 10px);

    background-size: 100% 140px;

    transform-origin: 12px 82px;

    transition: all 1s 500ms ease;

    transform: rotate(-150deg);

}

 .fact__meter .meter__arrow.animate[data-meter="1"] {

transform: rotate(-8deg);

}

.fact__meter .meter__arrow.animate[data-meter="2"] {

transform: rotate(-52deg);

}

.fact__meter .meter__arrow.animate[data-meter="3"] {

transform: rotate(-103deg);

}

.fact__meter .meter__arrow.animate[data-meter="4"] {

transform: rotate(-150deg);

}

.fact__meter .meter__arrow.animate[data-meter="5"] {

transform: rotate(-150deg);

}

js:-

<script> 

  let meterFt = document.querySelector('.meterFt');

    let mtrArrow = document.querySelector('.meter__arrow');

   

    let observer = new IntersectionObserver(

    (entries, observer) => {

        entries.forEach((entry) => {

        if (entry.intersectionRatio == 1) {

            mtrArrow.classList.add('animate');

        } 

        });

    },

    { threshold: 1}

    );

    observer.observe(meterFt);      

</script>  

Supporting img :-