Countdown Component - Smart Animation: Only Animate Changed Digits

[St0ckfish]

I'd like to propose an enhancement to the Countdown component's animation behavior to make it more efficient and visually refined. Current Behavior Currently, when a time unit changes (e.g., from 13 to 14), both digits animate even though only one digit actually changed. This means:

Going from 13 → 14: Both the 1 and 3→4 animate
Going from 19 → 20: Both digits animate (which makes sense here)

Proposed Enhancement
Implement smart digit animation where only the digits that actually change are animated:
Examples:

13 → 14: Only the second digit (3→4) animates, the 1 stays static
09 → 10: Both digits animate (as both changed)
19 → 20: Both digits animate (as both changed)
07 → 08: Only the second digit animates, the 0 stays static
59 → 00: Both digits animate (countdown wraps around)

Benefits
Cleaner Visual Experience: Users' eyes can focus on what's actually changing
More Professional Feel: Matches the behavior of high-end countdown timers
Accessibility: Less motion for digits that don't change reduces visual noise

Technical Implementation
This would require tracking the previous value of each digit individually and comparing them before applying the animation class. Only digits where currentDigit !== previousDigit would receive the animation.
Use Case
This is especially noticeable in countdowns with large numbers (e.g., days remaining) where the first digit might stay the same for extended periods. Having it unnecessarily animate every second creates visual distraction.
Would love to hear thoughts on this enhancement! Happy to contribute a PR if there's interest.

Next Steps

I'm ready to implement this feature and submit a PR. I've already built a working prototype that demonstrates this behavior perfectly.

Would the maintainers be open to:

1. Reviewing a demo/prototype first?
2. Or should I go ahead and submit a PR directly?

Happy to adapt my implementation and match daisyUI's coding standards!

[saadeghi]

That would be nice but how can we do this with CSS?

[St0ckfish]

The core approach:

1. Track previous digit values in component state
2. Compare prevDigit !== currentDigit
3. Conditionally apply animation CSS class only to changed digits
4. Use CSS keyframes for the slide-in/slide-out effect

I have a working implementation of this behavior and would be happy to adapt it for daisyUI and open a PR
Would you like me to proceed?

[saadeghi]

Yes, PRs are welcome 🙏
Please note:

• Please avoid breaking changes for developers (HTML must stay the same)
• daisyUI is CSS only. We can't ship/provide JS.

[St0ckfish]

Thank you! I'll open an issue now.

[pdanpdan]

In fact it is pretty easy to do this.
It is just a problem of choosing the preferred way of changing the least significant digit.
I have implemented both variants:

• v1 resets least significant digit after 9
• v2 resets least significant digit after 99 (this looks nicer to me)

Test:

• inspect any element in preview
• copy and paste update function in console
• let stop1 = start('counter1'); let stop2 = start('counter2');
• to stop stop1(); stop2();

https://play.tailwindcss.com/Py5BRwyrYO?file=css

Small tweaks to the JS test example: https://play.tailwindcss.com/RFf8TUNyCO?file=css

Fix some math calculations: https://play.tailwindcss.com/giXwOngI6x?file=css

• ignore negative numbers
• make sure the number is < 100

@saadeghi

Before and after can mostly be written as one rule (using the longer content), with only top and inline-inset-* different.