Component Doc
Quick start tutorial
How To Install The Flip Countdown Timer Component
The Flip Countdown Timer displays time remaining with animated digit transitions. Perfect for creating urgency in marketing campaigns, product launches, and sales countdowns.
Quick Start
Insert the Flip Countdown Timer component onto your Framer canvas
Select your mode: Date (countdown to specific date/time) or Timer (countdown from duration)
Configure the target date or duration in the properties panel
Customize which time units to display (Days, Hours, Minutes, Seconds)
Adjust styling properties to match your design
Test in preview mode - animations only appear in preview and live, not on canvas
Important Notes
All countdown dates use EST/EDT timezone for consistent display across all visitors
Redirect functionality is only available in Timer mode (not Date mode)
Redirect only works on live published pages - will show 404 in Framer preview
Digit animations only display in preview and live modes (not on canvas)
Properties
Property | Description |
|---|---|
Mode | Choose between Date mode (countdown to specific date) or Timer mode (countdown from duration) |
Target Date | The target date and time for countdown (Date mode only). All dates use EST/EDT timezone |
Duration | Countdown duration in seconds, from 1 to 86400 seconds (Timer mode only) |
Auto Restart | Automatically restart the timer when it reaches zero (Timer mode only) |
Redirect on Complete | Enable redirect when countdown completes (Timer mode only) |
Redirect URL | URL to redirect to when countdown ends. Supports internal routes (/path), hash links (#element), and external URLs (Timer mode only) |
Redirect Delay | Delay in milliseconds before redirect occurs (500-10000ms) (Timer mode only) |
Show Days | Toggle visibility of days unit |
Show Hours | Toggle visibility of hours unit (hidden in Timer mode) |
Show Minutes | Toggle visibility of minutes unit |
Show Seconds | Toggle visibility of seconds unit |
Digit Color | Color of the countdown digits |
Digit Background | Background color of the digit cards |
Label Color | Color of the time unit labels (Days, Hours, etc.) |
Digit Font | Font settings for the countdown digits (size, weight, letter spacing, line height) |
Label Font | Font settings for the time unit labels |
Gap | Spacing between time units in pixels (0-50px) |
Border Radius | Corner radius of digit cards in pixels (0-20px) |
Border Width | Width of digit card borders in pixels (0-10px) |
Border Color | Color of digit card borders |
Divider Size | Thickness of the horizontal divider line in pixels (0-10px) |
Divider Color | Color of the horizontal divider line between digit halves |
Shadow | Box shadow settings for digit cards (supports inset/outset, position, blur, spread) |
Troubleshooting
Issue: My end-date calculation isn’t adding up
All countdown dates use EST/EDT timezone for consistent display across all visitors. Make sure you're setting the target date with EST/EDT time in mind - the component automatically converts all times to EST/EDT for consistency.
Issue: Why can't I see the redirect options in Date mode?
Redirect functionality is only available in Timer mode (not Date mode). Switch to Timer mode to access redirect settings.
Issue: Why is redirect showing a 404 error in Framer preview?
Redirect only works on live published pages - it will show 404 errors in Framer preview mode. This is expected behavior. Test redirect functionality on your published live site.
Issue: Why don't I see digit animations on the canvas?
Digit animations only display in preview and live modes (not on canvas). On the canvas, you'll see placeholder values (12:34:56:78) for easier design work. This is expected behavior.
Issue: Timer mode not showing Days or Hours
Days and Hours are automatically hidden in Timer mode. Only Minutes and Seconds are available for duration-based countdowns.
Issue: Component not updating in real-time
The component updates every second. If it appears stuck, check that you're in preview or live mode (not canvas), and verify the target date or duration is set correctly.