A stopwatch button built to drop straight into an app: one click starts it, two clicks reset it, running entirely on a Rive state machine and animation layer, with no extra logic outside of Rive itself.
The Challenge
The reset needed to trigger when collected twice, but naively, that means detecting "two clicks" as a timed sequence, which adds complexity a simple UI button shouldn't need.
The Process
Click starts the stopwatch. First click moves the state machine out of idle and running.
Click logs a lap. A second click plays the "Add Lap" animation.
Exit Time opens a listening window. Once the lap animation finishes (Exit Time 100%), the state machine drops into a separate, empty timeline, a couple of frames long, no keyframes, built purely to wait.
That empty timeline is the double-click detector. If a click comes in during that short window, the state machine transitions to Reset. If nothing comes in, it transitions back to idle and waits for the next lap.
Result: double-click detection built entirely out of state machine timing, no external timers, no click-counting code, just an empty animation doing one job.
Demo
Like this project
Posted Jun 3, 2026
Developed a stopwatch button with two-click reset functionality using state machine and animation layer.