Text Rotators

The Text Rotator cycles through a list of words in place, either with an animated swap (Morphext) or a typewriter effect (Typed.js). It is perfect for hero headlines like "Build a [Corporate|Portfolio|Business] website."

Structure

Wrap the rotating text in an element carrying text-rotater and put the pipe- or comma-separated phrases inside a nested .t-rotate element.

<h2>
    <div class="text-rotater" data-separator="|" data-rotate="bounceIn" data-speed="2500">
        Super <span class="d-inline nocolor"><span class="t-rotate color">Simple|Customizable|Flexible|Easy</span></span> Text Rotator with Style
    </div>
</h2>

Key attributes

Attributes go on the .text-rotater wrapper.

data-separator: the character that splits phrases. Default ,. The demos often use |.
data-rotate: the swap animation name for Morphext mode (for example fadeIn, fadeInLeft, fadeInRight, flipInX, bounceIn). Default fade.
data-speed: animation speed. In Morphext mode this is the rotation interval in milliseconds (default 1200); in typed mode it is the type speed (default 50).
data-typed: set to true to switch from the swap animation to a typewriter effect.
data-loop: set to false to stop after one pass. Default loops.
data-shuffle: set to true to randomize phrase order (typed mode).
data-cursor: set to false to hide the typing caret (typed mode).
data-backspeed: backspace speed in typed mode. Default 30.
data-backdelay: pause before backspacing in typed mode. Default 500.

Animated swap (Morphext)

<h2>
    Build a
    <span class="text-rotater" data-separator="|" data-rotate="fadeInRight" data-speed="2000">
        <span class="t-rotate color">Portfolio|Business|Store|Blog</span>
    </span>
    Website
</h2>

You can even pass utility classes through data-rotate to style each phrase, for example data-rotate="fadeInUpSmall faster bg-color-2 bg-opacity-50 px-2".

Typewriter effect (Typed.js)

Set data-typed="true" and tune the type/backspace timings.

<span class="fw-bold text-rotater ls-1"
      data-separator="|"
      data-rotate="fadeIn"
      data-speed="60"
      data-backdelay="1800"
      data-typed="true"
      data-shuffle="true"
      data-loop="true">
    <span class="t-rotate color">Corporate|Portfolio|Business|Real Estate|Medical|Store|Freelancer</span>
</span>

Avoiding layout shift on load

Canvas hides a placeholder until the plugin is ready. A common pattern is a hidden fallback word plus a small style block:

<style>.has-plugin-textrotator .textrotator-placeholder{display:none}</style>
<span class="fw-bold text-rotater color textrotator-placeholder" title="Canvas Template">Anything</span>

Tips

Keep the separator consistent: if you set data-separator="|", split every phrase with |.
For headlines, typed mode with data-cursor="false" and a short data-backdelay reads cleanly.
In Morphext mode data-speed is the interval between swaps; larger values mean slower rotation.
Wrap the .t-rotate element in a color class (like color) so the rotating word stands out from the surrounding text.

Usage

<h1>
	<span class="text-rotater" data-separator="|" data-rotate="fadeInLeft" data-speed="6000">
		<span class="t-rotate font-weight-bold font-body">canvas.|different.|onepage.|digital.</span>
	</span>
</h1>

Settings

Setting	Description
`data-rotate`	The Rotation Style of the Text Rotator Example: `fadeInLeft`
`data-speed`	Speed of the Rotation Animation in milliseconds. Example: `1200`
`data-separator`	Separator between the Text Rotation words Example: `\|`
`data-typed`	Enables Typing Animation for the Text Rotator Example: `true` If Typing Animation is enabled, `data-rotate` will not work and `data-speed` values will be different
`data-speed`	Speed of the Typing Animation in milliseconds Example: `50` Use this only when `data-typed="true"` is applied
`data-backspeed`	Speed of the Backspacing Animation in milliseconds Example: `30` Use this only when `data-typed="true"` is applied
`data-backdelay`	Duration of the Delay before Backspacing starts in milliseconds Example: `1200` Use this only when `data-typed="true"` is applied
`data-loop`	Enable/Disable Animations Loop Example: `true` Use this only when `data-typed="true"` is applied
`data-shuffle`	Enable/Disable Shuffle Example: `true` Use this only when `data-typed="true"` is applied
`data-cursor`	Enable/Disable Typing Cursor Example: `true` Use this only when `data-typed="true"` is applied

Examples

Text Rotator with Typing Animation

The text rotator cycles through a list of words in place. Set data-typed="true" to use the typewriter (type-and-delete) effect instead of the default morph animation. Words go inside a .t-rotate element, separated by your chosen separator.

<h2>
    Build a
    <span class="text-rotater"
          data-typed="true"
          data-separator="|"
          data-speed="60"
          data-backspeed="30"
          data-backdelay="1800"
          data-loop="true"
          data-shuffle="true"
          data-cursor="true">
        <span class="t-rotate color">Portfolio|Business|Store|Blog|Anything</span>
    </span>
    website.
</h2>

Attributes (typing mode):

data-typed="true" turns on the typewriter effect (uses Typed.js). Leave it off for the Morphext fade/animation style.
data-separator splits the word list (default ,). Here | is used so commas can appear in words.
data-speed typing speed in ms per character (default 50).
data-backspeed delete speed (default 30); data-backdelay pause before deleting in ms (default 500).
data-loop="true" repeats the list; data-shuffle="true" randomizes order; data-cursor="false" hides the blinking cursor.

Non-typing (morph) mode uses data-rotate for the animation name and data-speed as the hold time:

<span class="text-rotater" data-rotate="fadeIn" data-separator="," data-speed="1200">
    <span class="t-rotate">One,Two,Three</span>
</span>

Was this page helpful?