Skip to main content
Create smooth word transitions with animated container width adjustments.

​
Usage

<ContainerTextFlip
  :words="['better', 'modern', 'beautiful', 'awesome']"
  :interval="3000"
  :animationDuration="700"
/>

​
Props

​
words
string[]
default:"['better', 'modern', 'beautiful', 'awesome']"
Array of words to cycle through in the animation.
​
interval
number
default:"3000"
Time in milliseconds between word transitions.
​
animationDuration
number
default:"700"
Duration of the transition animation in milliseconds.
​
class
string
default:""
Additional CSS classes to apply to the container.
​
textClass
string
default:""
Additional CSS classes to apply to the text.

​
Credits

Build docs developers (and LLMs) love

Get started for freeTalk to us