Jump to content
Search Community

Countdown with rolling numbers

Valeria test
Moderator Tag

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. 

 

Thanks!

 

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 8
  • Thanks 2
Link to comment
Share on other sites

  • 4 years later...
On 4/10/2018 at 1:38 AM, PointC said:

 

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.

:)

Hi, this is a great example of what I'm trying to do, I understand the logic and animation for 1 number, I started with a div going vertically from 0 to 9...

But I need to go from 0000000 to 2.000.000 in 5 or 10 s, which is very fast and involves 7 columns, so I don't know what to do, just make everything move very fast without really counting maybe... any idea ?

 

demo.jpg.e40adcf9c604b362b1efe9964fe349d7.jpg

 

in terms of repetition/loops that means that those values should be used for each column:

.2 / 2 / 20 / 200 / 2000 / 20000 / 200000

seems difficult to handle

 

Link to comment
Share on other sites

Hey there fripi - we're very happy to help with GSAP-specific questions in these forums, but it looks like this thread already goes into a lot of detail.

 

Is there something you're struggling with from an animation perspective or are you just stuck on the logic?

Link to comment
Share on other sites

4 minutes ago, Cassie said:

Hey there fripi - we're very happy to help with GSAP-specific questions in these forums, but it looks like this thread already goes into a lot of detail.

 

Is there something you're struggling with from an animation perspective or are you just stuck on the logic?

Well is it even possible to make 7 columns move that fast, animation/cpu/gpu wise ? I'm no developer, animating thing, I did it in after effect mut in html I'm not sure 

Link to comment
Share on other sites

36 minutes ago, Cassie said:

I don't see why not - 7 divs using transforms doesn't sound like a lot to me. But if it's an issue you could swop over to canvas.

 

Why don't you give it a go? We're here if you have GSAP questions

in terms of gsap animation, how can I put a global time to handle all the repeats, if the total time is 10s for example, how to align all those durations ?

 

animTl
        .add("p1")
        .to(n1,{y:"-=800", repeat:200000},"p1")
        .to(n2,{y:"-=800", repeat:20000},"p1")
        .to(n3,{y:"-=800", repeat:2000},"p1")
        .to(n4,{y:"-=800", repeat:200},"p1")
        .to(n5,{y:"-=800", repeat:20},"p1")
        .to(n6,{y:"-=800", repeat:2},"p1")
        .to(n7,{y:"-=160"},"p1")

Link to comment
Share on other sites

let duration = 10;

animTl
        .add("p1")
        .to(n1,{y:"-=800", just silly amounts of fast},"p1")
        .to(n2,{y:"-=800", way way too fast},"p1")
        .to(n3,{y:"-=800", way too fast},"p1")
        .to(n4,{y:"-=800", repeat:200, duration: duration / 200},"p1")
        .to(n5,{y:"-=800", repeat:20, duration: duration / 20},"p1")
        .to(n6,{y:"-=800", repeat:2, duration: duration / 2},"p1")
        .to(n7,{y:"-=160", duration: duration},"p1")

Well, you could do something like this?  But once you get to repeat: 200, you're looking at a tween that lasts 0.05 seconds which is ridiculously fast, so I would imagine a little bit of artistic license is probably appropriate, decide what 'fast' speed is fast enough and then just cap it there. The human eye isn't going to notice the difference. There's no need for a tween that lasts 0.0000005 seconds!

Link to comment
Share on other sites

12 minutes ago, Cassie said:

Yeah, definitely time to apply some artistic license 😂

I changed some settings and tried to add an ease at the start and end of the whole animation, but now numbers don't start from 0 anymore, what have I done wrong this time 🙈

  • Like 1
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.
×
×
  • Create New...