Text Rotator

Animated rotating or typed text within a heading element. It is shown in the block inserter as Canvas Text Rotator and registered as canvas-core/text-rotator.

Select the block on a page and its own settings open in the sidebar, in the panels below:

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Content

• Before TextDefaultEmpty

  Words that stay put in front of the phrase that changes.

• Rotating Texts (one per line)DefaultEmpty

  Enter each rotating phrase on its own line.

• After TextDefaultEmpty

  Words that stay put after the phrase that changes.

Settings

• HTML TagDefaultH2

  Whether the line counts as a heading in the page outline, and at which level.

  ChoicesH1H2H3H4H5H6PSPAN

• Animation ModeDefaultTyped (character by character)

  Whether each phrase is typed out and deleted a character at a time, or swapped whole with an animation.

  ChoicesTyped (character by character)Rotate (fade/slide swap)

• Swap AnimationDefaultFade In

  How each new phrase arrives when it replaces the one before it.

  ChoicesFade InFade In UpFade In DownFade In LeftFade In RightBounce InBounce In UpZoom InFlip In XRotate InLight Speed InFade In Up (short)and 3 moreShown when Animation Mode is "Rotate (fade/slide swap)"

• Phrase Arrival ClassesDefaultEmpty

  Extra classes carried by each phrase as it arrives, beside the animation: a speed modifier such as faster, or a highlight the design paints behind the swapping words.

  Shown when Animation Mode is "Rotate (fade/slide swap)"

• Hook on the Element ItselfDefaultOff

  Put the rotator class and its data attributes on the heading itself instead of a nested div. Use when a design styles the heading as the rotator.

• Rotating Phrase ClassesDefaultcolor

  Styling for the phrase that swaps, e.g. text-uppercase or fw-bold. Type none to leave it unstyled.

• Wrap Static TextDefaultOn

  Wrap the rotating phrase in a neutral span so the surrounding words keep the base colour. Off leaves the phrase as a direct child.

• Swap Interval (ms)Default2000

  How long each phrase is held before the next one replaces it.

  Shown when Animation Mode is "Rotate (fade/slide swap)"

• SeparatorDefault|

  Character the rotating phrases are joined with in the markup. Pick one that never appears inside a phrase.

• Type Speed (ms per character)Default50

  How long each character takes to appear. Lower is faster typing.

  Shown when Animation Mode is "Typed (character by character)"

• Back Speed (ms per character)Default25

  How long each character takes to be deleted again. Deleting usually reads better faster than typing.

  Shown when Animation Mode is "Typed (character by character)"

• LoopDefaultOn

  Start again from the first phrase after the last one. Turn it off to stop on the final phrase.

• Show CursorDefaultOn

  Show the blinking bar that follows the typing.

  Shown when Animation Mode is "Typed (character by character)"

Related

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Interactive: Accordions, AJAX Buttons, Carousels, Cookie Consent, Countdowns, Flip Cards.