How to animate and change a slider counter position in a clean way?

Question

I have a Swiper slider and a counter position like "1/10". I would like to change that current slide number (the 1) with an animation. I know how to replace the number but with this animation, it's like another story:

As you can see on the gif, it's working nicely if I click moderately on my slider, but when I double-triple-or-crazy click on the next link, that totally breaks the counter, due to the clone made in this gif example.
Do you know how can I do that in a better way?

I made a jsfiddle, working for the first count change only:
— http://jsfiddle.net/asb39sff/1/

// Init
var $c_cur = $("#count_cur"),
    $c_next = $("#count_next");

TweenLite.set($c_next, {y: 12, opacity: 0}, "count");


// Change counter function
function photos_change(swiper) {
    var index = swiper.activeIndex +1,
        $current = $(".photo-slide").eq(index),
        dur = 0.8,
        tl = new TimelineLite();

    // Just a test
    tl.to($c_cur, dur, {y: -12, opacity: 0}, "count")
      .to($c_next, dur, {y: 0, opacity: 1}, "count")

    //$c_cur.text(index);
    //$c_next.text(index + 1);
}

Answer 1

While I agree with @Tom Sarduy approach and actually would recommend it since it is a one-time creation of HTML elements but just to provide you with another idea, here is what I have been able to create quickly.

CSS changes:

.counter .next, .counter .count {
    position:absolute;
}
.counter .next {
    transform:translateY(-12px);
    left:0;
}

JavaScript changes:

//added before your [photos_change] method
var counter = $('.counter');
var currentCount = $('<span class="count">1<span/>');
counter.append(currentCount);
//

//and then inside your [photos_change] event handler
var prevCount = $('.count');
currentCount = $('<span class="count next">' + index + '<span/>');
counter.append(currentCount);
TweenMax.to(prevCount, dur, {
    y: -12,
    opacity: 0,
    onCompleteParams: [prevCount],
    onComplete: function (prevCount) {
        prevCount.remove();
    },
    ease: Power2.easeOut
});
TweenMax.fromTo(currentCount, dur, {
    y: 12,
    opacity: 0
}, {
    y: 0,
    opacity: 1,
    ease: Power2.easeOut
});
//

So I guess it is up to you to take whichever approach you like i.e. one-time creation of HTML elements on load or on click like the one I am proposing.

Apologies for the ugliness of the code, just something I cooked up in a hurry. Hope it helps in some way though.