Text Rotators

Display interactive Text Rotators within your Content or Headings to attract User Attention.

Code Example

<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

Option(s):

  • bounce
  • flash
  • pulse
  • rubberBand
  • shakeX
  • shakeY
  • headShake
  • swing
  • tada
  • wobble
  • jello
  • heartBeat
  • backInDown
  • backInLeft
  • backInRight
  • backInUp
  • backOutDown
  • backOutLeft
  • backOutRight
  • backOutUp
  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp
  • bounceOut
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRight
  • bounceOutUp
  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • fadeInTopLeft
  • fadeInTopRight
  • fadeInBottomLeft
  • fadeInBottomRight
  • fadeOut
  • fadeOutDown
  • fadeOutDownBig
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightBig
  • fadeOutUp
  • fadeOutUpBig
  • fadeOutTopLeft
  • fadeOutTopRight
  • fadeOutBottomRight
  • fadeOutBottomLeft
  • flip
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY
  • lightSpeedInRight
  • lightSpeedInLeft
  • lightSpeedOutRight
  • lightSpeedOutLeft
  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight
  • hinge
  • jackInTheBox
  • rollIn
  • rollOut
  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • zoomOut
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp
  • slideInDown
  • slideInLeft
  • slideInRight
  • slideInUp
  • slideOutDown
  • slideOutLeft
  • slideOutRight
  • slideOutUp
You can use all the available options from here: Animation Options

Ex: data-rotate="fadeInLeft"

data-speed

Speed of the Rotation Animation in milliseconds.

Ex: data-speed="1200"

data-separator

Separator between the Text Rotation words

Ex: data-separator="|"

data-typed

Enables Typing Animation for the Text Rotator

Option(s): true, false

Ex: data-typed="true"

Note: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

Ex: data-speed="50"

Note:Use this only when data-typed="true" is applied
data-backspeed

Speed of the Backspacing Animation in milliseconds

Ex: data-backspeed="30"

Note:Use this only when data-typed="true" is applied
data-backdelay

Duration of the Delay before Backspacing starts in milliseconds

Ex: data-backdelay="1200"

Note:Use this only when data-typed="true" is applied
data-loop

Enable/Disable Animations Loop

Option(s): true, false

Ex: data-loop="true"

Note:Use this only when data-typed="true" is applied
data-shuffle

Enable/Disable Shuffle

Option(s): true, false

Ex: data-shuffle="true"

Note:Use this only when data-typed="true" is applied
data-cursor

Enable/Disable Typing Cursor

Option(s): true, false

Ex: data-cursor="true"

Note:Use this only when data-typed="true" is applied

Text Rotator with Typing Animation

<span class="text-rotater" data-separator="|" data-speed="50" data-backdelay="1500" data-typed="true" data-shuffle="true" data-loop="true">
	<span class="t-rotate text-uppercase">Corporate|Portfolio|Business|Real Estate|Medical|Construction|Store</span>
</span>

Last Modified: August 20, 2020