Rotating Text

Creativethinking

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.
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	undefined	Callback function invoked when the text rotates to the next item.
mainClassName	string	''	Additional class names for the main container element.
splitLevelClassName	string	''	Additional class names for the container wrapping each split group (e.g., a word).
elementLevelClassName	string	''	Additional class names for each individual animated element.

@motionone/solid