Jump to content
GreenSock

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

animate the changing text with textplugin/GSAP

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!

countdown-timer-gif-6.gif

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

Mikel

 

 

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