Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Countdown with rolling numbers

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello to the community


I'm trying to create a countdown with a special design and to animate like slots numbers do: with mask and rolling from top to bottom. Is there something similar? Any clues?

I found this 

See the Pen pWXgNG by creativeocean (@creativeocean) on CodePen

 but it's not what I need. I need from 300.000 to 0, different speeds, and this kind of animation: shot_1300987146.png 


Any advices or help on this?

The speed and the number to start from and go to, will change every 5 minutes. 




Link to comment
Share on other sites

Hi Valeria,


Actually, what you're looking for is way easier than the example you showed.

There are multiple ways to do what you want: you could either have, for each column, one big image with all the numbers that you animate so that it slides up or down, OR use basically the same technique but animating the background-position property, or you could do it all in CSS with no image at all in which case the column would be a div that you slide up or down.


It's up to you really; the first two methods are probably equivalent (the first one is maybe a bit better performance-wise, the second one is "cleaner"), while the third one is a bit more complex but doesn't require any images.


In any case, once you've animated the numbers going up or down in each individual column, you'll have to write additional code to determine which columns to animate and how many times in order to reach a specific value. That will probably be the most difficult thing to figure out. But we can help you with the first step for now.

  • Like 4
Link to comment
Share on other sites

Thanks Acccent 

I do understand that, and will do it with plain CSS for sure, just asking if there's some code somewhere so I don't have to start from 0 :). I'm quite new with tweenmax animations and takes me a lot of time to user timelines properly with the right libraries an methods for each need.  I'm learning and I love the tools and so many "easy" possibilities to animate things that are very complex without them. 

Thanks a lot!

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums!!


A looooooooong time ago I made this for another question in the forums. It uses the draggable tool to move the numbers but you could easily use it to get started with what you need:



I made a fork of it and changed a bit to simulate what you need:


See the Pen jzdbMB by rhernando (@rhernando) on CodePen


Hopefully this helps.

Happy Tweening!!!

  • Like 9
  • Thanks 1
Link to comment
Share on other sites

Hi @Valeria :)


Welcome to the forum and thank you for joining Club GreenSock.


As @Acccent mentioned, there would be a whole bunch of ways to approach this. Here's my two cent approach for you. 


See the Pen eMxmwN by PointC (@PointC) on CodePen


I'm not sure if that is even close to what you had in mind, but maybe it will give you some ideas. Happy tweening and welcome aboard.




@Acccent - congratulations on your Moderator promotion. Well done! :)


  • Like 7
  • Thanks 2
Link to comment
Share on other sites

@Rodrigo and @PointC thank you so much for your help! This is awesome and helps me a lot to put me in track. 


Thanks for your help. I really appreciate it!!


Best, Valeria

  • Like 3
Link to comment
Share on other sites

I got sliiiightly carried away and made this, haha. I don't if it will help because I saw @Rodrigo and @PointC had provided great answers so I didn't bother commenting the code, but feel free to ask if anything is intriguing.


See the Pen jzdbwm?editors=0010 by Acccent (@Acccent) on CodePen


PointC, thanks! hehe :)


  • Like 8
  • Thanks 1
Link to comment
Share on other sites

Wow. Great demos all. Impressive.

  • Like 3
Link to comment
Share on other sites

@Acccent thank you so much! All great demos. Great help for me, and I hope it helps others as well! Thanks a lot!

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.