Rotating Text

A component that animates between multiple text strings with smooth transitions.

The Rotating Text component creates smooth, animated transitions between different text strings. It's perfect for highlighting multiple features, benefits, or descriptive words in a limited space.

Preview

Usage

The Rotating Text component can be used to create engaging text animations that cycle through different words or phrases. It supports various animation styles and can be customized to match your design.

Features
  • Smooth Animations: Creates fluid transitions between different text strings.
  • Character-Level Animation: Animates each character individually for a more engaging effect.
  • Customizable Timing: Control the rotation interval and animation duration.
  • Multiple Animation Styles: Choose from different animation styles (slide up, fade, slide side).
  • Staggered Animations: Characters animate with a staggered delay for a more natural effect.
  • Flexible Configuration: Extensive props for customizing the appearance and behavior.
  • AnimeJS Integration: Powered by AnimeJS for smooth, high-performance animations.
Component Code
 RotatingText.vue
 index.ts
Props
PropTypeDefaultDescription
textsstring[]RequiredArray of text strings to rotate through
transitionobject{ type: "spring", damping: 25, stiffness: 300, duration: 0.4 }Animation transition properties
initialobject{ y: "100%", opacity: 0 }Initial state of entering text
animateobject{ y: 0, opacity: 1 }Animated state of visible text
exitobject{ y: "-120%", opacity: 0 }Exit state of leaving text
rotationIntervalnumber2000Time in ms between text rotations
staggerDurationnumber0.025Delay between each character's animation
staggerFrom"first" | "last" | "center" | "random" | number"first"Where the stagger animation starts from
loopbooleantrueWhether to loop through texts continuously
autobooleantrueWhether to auto-rotate through texts
splitBystring"characters"How to split text ("characters", "words", "lines")
mainClassNamestring""Class for the main container
splitLevelClassNamestring""Class for the split level elements
elementLevelClassNamestring""Class for the individual character elements
Methods
The component exposes the following methods that can be called using a ref:
MethodParametersDescription
next()NoneAdvance to the next text
previous()NoneGo back to the previous text
jumpTo()index: numberJump to a specific text by index
reset()NoneReset to the first text
Example
<template>
  <div>
    This is a
    <RotatingText
      :texts="['smooth', 'animated', 'beautiful', 'interactive']"
      :rotation-interval="2000"
      main-class-name="bg-gradient-to-r from-indigo-500 to-pink-500 text-white px-1 py-0.5 rounded-md"
      stagger-from="last"
      :stagger-duration="0.025"
    />
    component.
  </div>
</template>

Credits
Matter Card
A card component built with matter.js