Duration format possible? Or custom formatting options?

[daryl]

Hey,

You've killed it once again, the update from motion-number is great, man.

I have a specific use case for this, and I'm wondering if something like this is possible to animate:

2m 4s → 4m 8s → 3s

Imagine that sequence.

Thanks again.

[barvian]

Hey man, thanks a lot! Hopefully it's fixing your initial issues 🤞 . There's not much support for custom formatting like this atm unfortunately. Time in general needs special treatment too because it loops from 59 → 00. I have some ideas to handle it, though, and I'll keep this updated if that goes anywhere.

In the meantime I think the best way to handle this would be two NumberFlows, one for the minutes and one for the seconds, and Framer Motion layout animations to keep everything in sync. I don't know if you've seen the layout animation example example on the site but it might be a good starting point. I think I'll try taking a stab at this myself over the weekend 🤔

[barvian]

It's not perfect but here's the best way to handle it ATM I think. It ended up not needing Framer Motion:

https://codesandbox.io/p/sandbox/number-flow-51-thncyf?workspaceId=cbc394d8-76be-4eee-b6ad-557eaf0d663f