Poll Vote
Casting a vote fills every bar to its share and the percentages arrive behind them.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Poll Vote
*
* Before the vote a poll is a list of choices; after it, a chart. The
* option you picked fills first and the rest follow a beat later — theAbout this pattern
Before the vote a poll is a list of choices; after it, it is a chart. The transition has to do both jobs at once, so the option you picked fills first and the others follow a beat later — the order is the acknowledgement, and it lands before any number does. Bars grow with scaleX from the leading edge, which keeps the whole reveal on the compositor, and the labels sit outside the bar so nothing containing text is ever scaled.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Chat thread
The chosen option is acknowledged before the totals are read out.