Skip to content

Instantly share code, notes, and snippets.

@jsturgis
Created November 27, 2014 08:41
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jsturgis/e5c88f150fa4710a3019 to your computer and use it in GitHub Desktop.
Save jsturgis/e5c88f150fa4710a3019 to your computer and use it in GitHub Desktop.
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js"></script>
<div class="odometer-digit-container" data-offset="1" data-time="0.25">
<div class="odometer-digit-inner">
<div class="odometer-scroll-container">
<div class="odometer-scroll-digit"></div>
<div class="odometer-scroll-digit"></div>
<div class="odometer-scroll-digit"></div>
</div>
</div>
</div>
.odometer-digit-container {
height: 18px;
overflow: hidden;
}
var val = 18,
time = 15,
zero = 0,
digits =document.querySelectorAll('.odometer-scroll-digit'),
elem = document.querySelectorAll('.odometer-scroll-container')[0],
anim1 = null;
anim1 = TweenMax.fromTo(elem, 0.25, {y: -(val+15)}, {y: -val, repeat:time, paused: true repeatDelay: 0.75, onRepeat :function(){
if(time===0){
anim.progress( 1.00 );
anim.kill();
return;
}
time--;
digits[0].innerHTML = time-1;
digits[1].innerHTML = time;
digits[2].innerHTML = time+1;
}});
TweenMax.fromTo(elem, 0.08, {y: -(val+15)},{y: -val, repeat: time, repeatDelay: 0,onRepeat: function(){
zero++;
digits[0].innerHTML = zero+1;
digits[1].innerHTML = zero;
digits[2].innerHTML = zero-1;
}, onComplete: function(){
anim1.play();
}});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment