How to animate and change the position of the slide counter in its purest form?

Question

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

As you can see on the gif, it works beautifully if I click on the slider moderately, but when I double-triple or madly click on the following link, it completely breaks the counter, due to the clone made in this gif example.
Do you know how I can do this better?

I made jsfiddle, working only for the first account change:
- 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

So far, I agree with @Tom Sarduy's approach and actually recommend it, as it is a one-time creation of HTML elements, but just to give you a different idea, here is what I managed 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 think it’s up to you to decide whichever approach you choose, for example, one-time creation of HTML elements at loading, or a click, like the one I suggest.

Sorry for the ugliness of the code, just what I prepared in a hurry. Hope this helps in something though.

Answer 2

I think your HTML structure is not good enough for animation, so I created my own script with a different approach and custom html tags, the animation is done using CSS3 transitions, and the numbers are precomputed to avoid problems with quick clicks:

Jquery:

 $('#change-button').click(function(){ //Getting current slide var $current = $('.current'); //Remove the class to find next one $current.removeClass('current'); if($current.is(':last-child')){ //Resetting the counter if is the last child $('#counter ul li:first').addClass('current'); $('#counter ul').css('top','0px'); } else{ $current = $current.next(); $current.addClass('current'); //Getting the next number to recalculate //the new top position var $num = parseInt($current.text()); $('#counter ul').css('top',-($num-1)*18+'px'); } }); 

 $('#change-button').click(function(){ var $current = $('.current'); $current.removeClass('current'); if($current.is(':last-child')){ //Resetting the counter $('#counter ul li:first').addClass('current'); $('#counter ul').css('top','0px'); } else{ $current = $current.next(); $current.addClass('current'); var $num = parseInt($current.text()); $('#counter ul').css('top',-($num-1)*18+'px'); } }); 

 .container{ background-color: #000; padding: 10px; color: #fff; width: 300px; float: left; } .container li{ display: inline-block; vertical-align: middle; } #counter{ width: 16px; height: 18px; overflow: hidden; position: relative; } #counter ul{ position: absolute; padding: 0; margin: 0; height: 18px; width: 16px; transition: all .5s; } #counter ul li{ display: block; clear: both; text-align: right; } #change-button{ margin: 10px; float: left; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <li>Graphics</li> <li id="counter"> <ul> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> </ul> </li> <li>/ 4</li> </div> <button id="change-button" href="#">Change!</button> 

If the animation works for you, you will have to integrate it with your code, creating an unordered list with all the values, knowing how many slides you have (should be easy).