Animated Text (Divi)

A headline that moves, for Divi 5: words that rotate in and out, text that types itself, a mark drawn by hand around a word, or letters that animate in. Each example is labelled with the settings that make it; every one is the same module.

1. Rotating words

Style: Rotating words · Animation: Slide up · Show Each Word 2.5 s · Glide to Each Word’s Width, so the text after the words slides to make room.

2. Twelve more whole-word effects

Rotation → Animation. Clip closes the word to a bar and opens the next; Loading bar fills under the word while it shows (Bar Colour and Thickness in Mark, Cursor & Bars).

Slide sideways

Zoom in

Drop in (bounce)

Loading bar

3. Letter by letter

The seven letter effects, each letter delayed by Letter Delay (40 ms here, 70 ms on the wave).

Letters: flip (3D)

Letters: wave

4. Marks, colours and more rotation settings

Draw a Mark Under Each Word (redrawn every time) · a colour per word (“word | #colour”) · gradient fill · pause on hover · no loop (stops on the last word) · the words on their own line.

Gradient fill · pause on hover · brush mark

Animated text on its own line, centred

5. Typing

Style: Typing · typing and deleting speeds, pause before deleting, start delay · cursor bar, block or underscore, blinking or not · remove the word by deleting or by selecting it.

Block cursor, select then clear

Types once and stops (loop off)

6. Hand-drawn marks

Style: Highlighted · 11 shapes · Draw when scrolled into view, when the page loads, on hover, or always · duration, delay, redraw again and again (the scribble), behind or over the text · Mark colour, thickness, opacity and offset.

Underline · drawn when scrolled into view

Diagonal · drawn when scrolled into view

Brush stroke · drawn when scrolled into view

Box · on hover · over the text

7. Split letters

Style: Split letters · 7 entrances played when scrolled into view (letter delay and duration), the whole sentence or only the animated text, replay each time, and 4 hover effects.

Entrance: Flip (3D)

Entrance: Wave

Hover: ripple · replays in view

8. A dark hero, styled from the Design tab

Animated Text group: background, padding and rounded corners make a pill that glides to each word · Heading font 56 px (36 px on phones) · Before / After text in a lighter colour · a link · centred on desktop, left on phones.