Rotating Text
Customize Rotating Text
Stagger Duration0.025s
Rotation Interval2000ms
Damping30
Stiffness400
Props
| Property | Type | Default | Description |
|---|---|---|---|
| texts | string[] | [] | An array of text strings to be rotated. |
| rotationInterval | number | 2000 | The interval (in milliseconds) between text rotations. |
| initial | object | { y: "100%", opacity: 0 } | Initial animation state for each element. |
| animate | object | { y: 0, opacity: 1 } | Animation state when elements enter. |
| exit | object | { y: "-120%", opacity: 0 } | Exit animation state for elements. |
| animatePresenceMode | string | "wait" | Mode for AnimatePresence; for example, 'wait' to finish exit animations before entering. |
| animatePresenceInitial | boolean | false | Determines whether the AnimatePresence component should run its initial animation. |
| staggerDuration | number | 0 | Delay between each character's animation. |
| staggerFrom | string | "first" | Specifies the order from which the stagger starts. |
| transition | object | - | Transition settings for the animations. |
| loop | boolean | true | Determines if the rotation should loop back to the first text after the last one. |
| auto | boolean | true | If true, the text rotation starts automatically. |
| splitBy | string | "characters" | Determines how the text is split into animatable elements (e.g., by characters, words, or lines). |
| onNext | function | - | Callback function invoked when the text rotates to the next item. |
| mainClassName | string | "" | Additional class names for the main container element. |
Created with ❤️ by Cybershoora