This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Stephen Crowley
Posted Jul 28 - Read on Facebook

I am designing a Dashboard and would like the numbers to animate like countup.js... wondering if it's an effect I could add without using countup.js. Maybe it's Friday but I can't wrap my head around how I should go about it. Thanks in advance for any input :)

21 Comments

Alex Hazel

I mean...you are just running multiple loops through an array of numbers and when one number reaches a certain value then the other loop stops. Shouldn't be too hard, but will require a bit of setup.

Keith Lang

What about a hack where you have an invisible object positioned on the screen and Animate to the new position (number) and read the x position?

Stephen Crowley

haha, yeah Keith I did think of doing it that way but it's not the most elegant solution. Working on a solution right now, see if it'll do the trick

Keith Lang

Stephen Crowley I'd love to see that solution. 'Animating' stuff that doesn't exist on the screen has puzzled me too.

Ed Chao

sounds cool, would be interested in seeing the proj when you finish :)

Stephen Crowley

Ed I've been wanting to post my progress so bad for the past 3 months but an NDA prohibits it :( I'll have to make a separate project and post.

Ed Chao

ah feels

Stephen Crowley

Ed - you know how to include a new coffeescript library in Framer?

Ed Chao

script include it in the html is my guess

Andreas Wahlström

Try utils.domLoadScript("file.coffee")

Stephen Crowley

Thanks Andreas - using that for a js library but when i use it for .coffee it breaks my project... hmm, i'll continue investigating.

Stephen Crowley

Ok, not elegant but I got it.

Stephen Crowley

Ok, whipped up an example- Ed, it's not very sexy but it'll get the job done: http://cl.ly/1M3N0w2Y0Y0V

Ed Chao

Hey Stephen Crowley , instead of tracking the changing x of an animating layer, you can always try writing a simple countdown function like this, that takes the number you count to and the time delay between numbers:

Stephen Crowley

Thanks Ed, my issue is having it update the NumberCounterBox.html to display it on the screen.

Ed Chao

you mean something like this? this writes the changing count to the layer.html. (edited to correct mistake)

Stephen Crowley

Yes! Wow, sorry- I see what I did wrong. Thank you!

Andreas Wahlström

the nice thing about Stephen Crowleys previous example is how you can easily add custom curves to the countdown. eg. springs or easings

Ed Chao

hm, that's true, I guess I didn't think about needing that as a feature. I'll think about it some more.

Akhil Dakinedi

Ed Chao thanks! this is awesome, it's exactly what I was looking for. I know this post is almost a year old, but would you know how to expand upon your code to create a full-on countdown timer?

what I'm looking for is when I have countTotal set to anything more than 60, the countdown actually changes to show the minutes as well as seconds. so if I set countTotal to 90, it would start off at 01:30 and count down, eventually changing to 00:59 if it gets below 60.

I tried playing with it but I can't get it to map the seconds to minutes properly. what I'm doing is trying to assign 60 to 120 as "one minute" and 121 to 180 as "two minutes" in countTotal but I feel that there's a better way of doing it.

Stephen Crowley

Oh wow, I forgot about this! I think I got a solution for you Akhil, I'm walking to the office now

Read the entire post on Facebook