animate the changing text with textplugin/GSAP

[Tejaxx7 0 Likes (Newbie)]

I want to change numbers in a box.
I am using Textplugin and timeline from GSAP.

below i attatched a gif file that is the animation i require!

See the Pen byedwE by tejaxx7 (@tejaxx7) on CodePen

[mikel 4,774 Likes (Superhero)]

Hi @Tejaxx7,

 

If you need something like an analog clock, please use the keyword 'clock' and search here in our GreenSock Forum.

 

The result e.g. this

 

kind regards

Mikel

 

 

[Shaun Gorneau 2,030 Likes (Superhero)]

Hi @Tejaxx7,

 

Here is a Pen I put together demonstrating the seconds (ones/tens independently) to achieve the analog rolling effect. You could use the same techniques to bring the minutes and hours into play. If you need to present a specific time before tweening, you could get all time values individually and set the progress() of each respective timeline.

 

See the Pen qGaxdV?editors=1111 by sgorneau (@sgorneau) on CodePen

 

Edit: I left overflow visible in the pen so you can see what's going on. You can change that in the CSS to get your final effect.

 

Happy tweening!

[PointC 14,185 Likes (Superhero)]

We had a rolling numbers thread last year and there were a number of neat solutions that you may find helpful.

Happy tweening.