Как сделать анимацию наjQuery при появлении объекта на экране?

Есть код, но он работает некорректно. Как сделать так чтобы при появлении на экране полоска заполнялась один раз и далее никак не видоизменялась?

    var target = $('.meter');
    var targetPos = target.offset().top;
    var winHeight = $(window).height();
    var scrollToElem = targetPos - winHeight;
    $(window).scroll(function () {
        var winScrollTop = $(this).scrollTop();
        if (winScrollTop > scrollToElem) {
            $(".meter > span").each(function () {
                $(this)
                    .data("origWidth", $(this).width())
                    .width(0)
                    .animate({
                        width: $(this).data("origWidth")
                    }, 1200);
            })
        }
    });

.meter {
        margin-top: 20px;
        position: relative;
        height: 3px;
        background: #d8d8d8;
        width: 500px;
        margin-left: 98px;
    }

    .meter>span {
        position: relative;
        display: block;
        height: 100%;
        background-color: #10c9c3;
    }

    #proskills h1 {
        font-size: 30px;
        position: relative;
        margin-left: 98px;
        margin-top: 166px;
    }

    #percents p {
        margin-top: 39px;
        position: relative;
        font-size: 12px;
        color: black;
        margin-left: 98px;
    }

    #percents {
        margin-top: 1253px;
        position: absolute;

        background-color: #f8f9f9;
        width: 100%;
        height: 610px;
    }


<div id="proskills">
    <div id="percents">
        <h1>Professional Skills</h1>
        <p>UI/UX DESIGN 75%</p>
        <div class="meter"><span style="width: 75%"></span></div>
        <p>WEB DEVELOPMENT 90%</p>
        <div class="meter"><span style="width: 90%"></span></div>
        <p>MARKETING 60%</p>
        <div class="meter"><span style="width: 65%"></span></div>
    </div>
</div>