Voy a formular mis comentarios en una respuesta que creo será más cómoda de ver.

El problema está únicamente en la función animación, que debe llevar al paso correcto y actualmente activa todos de golpe. Yo la cambiaría a:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    function animacion(caso){
      var pixels = (caso * 250) + "px";

      $(".progressbar li.active").removeClass("active");
      
      $( ".cartanime" ).animate({ "left": pixels }, "slow" ,function(){
        $(`.progressbar li:nth-child(${caso})`).addClass("active");  
      });
    };

<!-- end snippet -->