Dynamic Text
ダイナミックテキスト
A burst of words that runs once and settles on the last one — a greeting flicking through its translations before landing on yours. Each step is its own setTimeout↗↗ keyed off the current index rather than one repeating interval, because the run has to stop by itself and cancelling an interval from inside a state updater fires the stop twice. It overlaps Loop Cycle, which does the same swap with a longer hold and no end; reach for that one when the content should keep turning, and this one when the motion is an arrival. Adapted from Kokonut UI↗↗ under the MIT licence.
Installation
Install the following dependencies:1
npm install framer-motionCopy and paste the following code into a new component file:2
How to use it3
Props
DynamicText
| Name | Default | Description |
|---|---|---|
| items | — | string[] Words shown in order, the last one held |
| interval | 300 | number Milliseconds between steps |
| dark | false | boolean Render the dark palette |