Pagination Page Turn
The current rows leave in the direction you asked for and the next set arrives from the opposite side.
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, type ReactNode } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Pagination Page Turn
*
* The table turns like a page: the current rows leave in the direction
* you asked for and the next set arrives from the opposite side, soAbout this pattern
Paging a table without losing your place in it. Direction is the entire message: forward sends the current set left and brings the next in from the right, back reverses both, so two presses that land on the same content still read as opposite moves. The body is a fixed height, because a page that resizes mid-turn fights its own horizontal travel and makes the pager below hop. Rows are wall-to-wall text, so the travel is short, nothing scales, and the springs sit near critical damping — an overshoot here drags every figure past its column and back. The page indicator deliberately does not slide between numbers: the rows are what travels, and a second travelling object would only compete for the same glance.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Data table
A dense list of records where paging shifts the rows rather than blanking the table.
Related patterns
- Accordion ExpandOne section opens as the previous one closes, both heights easing over the same beat so the list never jumps.
- Tree Node ExpandA folder's chevron turns as its children unfold with a small stagger.
- Wizard Step AdvanceThe rail fills toward the step you are entering while the panel travels the way you sent it.