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

What is Framer? Join the Community
Return to index
Thierry Meier
Posted May 18 - Read on Facebook

I am working on an animation that involves showing a price to users they have won for a certain product. To build up some excitement, I am looking to reveal the price by initialising the price label from $0.00 and then counting up until the price is reached, to let's say $185.50.

How can I achieve such a counting animation? Ideally, the start of the counting would begin somewhat slow, then speed up and get slower again before the price is reached.


Mike Feldstein

What i did here was define a property on a layer called price, the nice thing about this is that since its a property, its animatable, which means we can use the built in easing.

Thierry Meier

Mike, thanks for this, appreciate it! Is it correct for me to understand that you basically created a new property on top of textLayer that has an HTML output (the prize that is shown) attached to it. After that, you simply count up the property to the desired prize?

Mike Feldstein

Yes, you can animate it up like you do in the click, or you can set it directly, like i did to set it to zero. You can do whatever you want in a properties setter, in this case I set the HTML value to show the text, but you could also change other properties, for example, set the background color to show how close to "prize money" it is.

Thierry Meier

Ahh that makes sense, the HTML value can be modified in every way a property can be modified. This opens up a ton of possibilities thinking about it. That's a nifty solution, thanks a bunch!

Mike McGetrick

Sounds cool. If they are "winning" the price and a lower price is preferred. Might you want to count down from some higher price?

Mike Feldstein

Thierry Meier i believe the html property sets innerHTML, if you really want to mess around you can get layer._element property and do whatever you want.

Read the entire post on Facebook