Jump to content


animate the changing text with textplugin/GSAP

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

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

Link to comment
Share on other sites

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




  • Like 1
Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

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

Happy tweening.



  • 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.