New text animations in Divi 5 (free layout)

Text animations in Division 5: Create cascading effects step by step

Do you want to create eye-catching text animations with? Division 5? In this post I will show you how to build step by step Text animations in Divi 5 with cascading effect, letter by letter and without code.

How to create text animations in Divi 5

Thanks to the new layout options in Divi 5 and its animation system we can create these types of effects in a very visual way. Let’s go step by step.

1. Create the basic structure

First add a section, then a row and within that a column. We will create all the text animations in Divi 5 in this column.

2. Insert each letter into a text block

This is the key to the effect: each letter must be placed in its own module.

For example, if you want to write “HELLO,” you would need five blocks of text, one for each letter.

Start with the first letter and format it:

• Text size: for example 180 pixels
• Color: whatever suits your design
• Very important: Set the row height to 100% to ensure that the module height is correct

This step is important to ensure that your text animations in Divi 5 look good right from the start.

3. Duplicate the modules

Once the first module is finished, simply duplicate it for the rest of the letters and update the content.

This will help you maintain visual consistency and work much faster.

4. Convert the column to a horizontal layout

Now we will place the letters horizontally. Go to the column settings, open the “Design” tab and change the direction in the layout to Row. Then center everything Justify content set to center.

From the same panel you can also adjust the spacing between letters to better fit your design.

5. Hide overflow content

For the effect to work properly, go to the column settings and enable the option to hide overflow content.

This allows the letters to penetrate from the outside without being visible beforehand, which is key with this type of text animation in Divi 5.

6. Apply animations

Now it’s time to animate each letter. In each text module, go to the Design tab, open Animations and select the slide Type. Then switch directions so that one letter is entered from above and the next from below.

This small detail makes the animation much more dynamic and visually appealing.

7. Add a delay for the cascade effect

To complete the text animations in Divi 5, add a small delay between each letter. Starting from the second module, increase the delay by 200 ms every time. This creates a progressive entry effect.

This creates the cascade effect and gives your headline more personality.

Final result

If you follow these steps you will get Text animations in Divi 5 which are modern, dynamic and highly visual, perfect for highlighting important sections of your website.

Plus, it’s very easy to adapt to different styles and projects, so you can reuse it anytime you want to add a more creative touch to your designs.

If you liked this content, I also recommend you check out this tutorial: Full Screen Design with Simple Animations in Divi 5

Continue / Download