Problème JS counter

Bonjour,

J'ai un site web où j'aimerai afficher des chiffres clés et j'aimerai avoir une animation dessus, par exemple, nombre d'années d'expérience = 10, j'aimerai faire une animation avec un chiffre qui va de 1 à 10. Je ne mis connais pas en JS mais j'ai trouvé un petit bloc de code que j'ai essayé d'adapter à ma sauce mais ce dernier ne fonctionne malheureusement pas :/

Voici mon HTML :

<section>
<div class="container">
    <div class="row">
        <div class="col-md-4 col-sm-6">
            <div class="counter">       
                <div class="counter-icon"><i class="fa fa-globe"></i></div>
                <span class="counter-value">7</span>
                <h3>Années d'Expérience</h3>
            </div>
        </div>
        <div class="col-md-4 col-sm-6">
            <div class="counter red">
                <div class="counter-icon"><i class="fa fa-user-circle"></i></div>
                <span class="counter-value">400</span>
                <h3>Clients</h3>
            </div>
        </div>
        <div class="col-md-4 col-sm-6">
            <div class="counter green">
                <div class="counter-icon"><i class="fa fa-rocket"></i></div>
                <span class="counter-value">17</span>
                <h3>Domaines de Compétences</h3>
            </div>
        </div>
    </div>
</div>
</section>

Voici mon CSS :

    .counter{
    font-family: 'Montserrat Alternates', sans-serif;
    text-align: center;
}  
.counter .counter-icon{
    color: #fff;
    background-color: #479C97;
    font-size: 40px;
    line-height: 90px;
    height: 100px;
    width: 100px;
    margin: 0 auto;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.counter .counter-value{
    color: #479C97;
    background-color: #eee;
    font-size: 35px;
    font-weight: 400;
    letter-spacing: 0.5px;
    padding: 15px;
    margin: -25px 0 0;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    display: block;
}
.counter h3{
    color: #fff;
    background-color: #479C97;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: capitalize;
    padding: 8px 12px;
    margin: 0;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 5px 5px rgba(0,0,0,0.2) inset;
    display: inline-block;
}
.counter.green .counter-icon,
.counter.green h3{
    background-color: #5ECDC6;
}
.counter.green .counter-value{ color: #5ECDC6; }
.counter.red .counter-icon,
.counter.red h3{
    background-color: #2EBFBE;
}
.counter.red .counter-value{ color: #2EBFBE; }
.counter.orange .counter-icon,
.counter.orange h3{
    background-color: #F89128;
}
.counter.orange .counter-value{ color: #F89128; }
@media screen and (max-width:990px){
    .counter{ margin-bottom: 40px; }
}

Voici mon JS (que j'aimerai modifier pour que ça fonctionne ahah) :

document.querySelector(document).ready(function(){
    document.querySelector('.counter-value').each(function(){
        document.querySelector(this).prop('Counter',0).animate({
            Counter: document.querySelector(this).text()
        },{
            duration: 3500,
            easing: 'swing',
            step: function (now){
                document.querySelector(this).text(Math.ceil(now));

            }
        });
    });
});