Address Autocomplete
Choosing a suggestion closes the list from the bottom up and fills the fields in reading order.
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 { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Address Autocomplete
*
* Choosing a suggestion closes the list from the bottom up and fills the
* fields in reading order, each one flashing a ring as its value lands.About this pattern
The step that decides whether a checkout feels short. Sequence does the work: five fields populating at once looks like a glitch, five populating in reading order looks like the form typing for you. The list empties from the bottom so the chosen row is the last one on screen, each value crossfades inside an absolutely positioned slot so the row never holds two at once, and a ring flashes over the field as its value lands. Values slide a few pixels and fade but never scale — an address that grows into place is an address that is hard to proofread.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Checkout
Address lookup collapses its suggestion list and populates the remaining fields immediately.
Related patterns
- Cart Quantity StepperStepping the quantity rolls the count and both totals in the direction of the change.
- Cart Badge CountThe cart badge rolls each changed digit in the direction of the change and settles once.
- Gift Card ApplyA single sheen crosses the card while the balance eases down and the amount due settles to zero.