Starter Animation Text Effect

Estimated reading: 8 minutes 18 views

Make sure Animation Addons is installed and activated on your WordPress site before you start.

Requirement

Elementor (Page Builder)
Animations Addons (Our Plugin)

How To Activate Starter Animation

Unlike other extensions, you do not need to activate Starter Animation separately. Once you install Animation Addons, it will be activated by default.

To find the Starter Animation Extension in the Editor panel under the Content tab on the left side of the screen. To apply animation, simply click the element you want to animate.

Glow Plus

The Glow Plus animation makes text shine with a glowing light effect.

Duration (ms): Controls how long one glow animation cycle takes. In this example, the duration is set to 600. However, you can set any value based on your preference.

Delay (ms): Controls how long the animation waits before starting. In this example, the delay is set to 0.02 ms. However, you can set any value based on your design needs.

Easing: Controls how the animation’s speed changes while the scaling effect runs.

Common easing types:

Linear → keeps the same speed from start to end
Ease In → begins slowly and then speeds up
Ease Out → starts fast and slows near the end
Ease In Out → slow at the start, faster in the middle, and slow again at the end
Smooth Cubic → produces a very smooth and natural motion
Elastic Feel → creates a spring-like bounce before the animation finishes

In this example, Ease Out is applied. However, you can select any easing type according to your needs.

Glow Color: Choose any color you want to apply to the text for the glowing light effect. In this example, lime green is selected.

Glow Size: Controls how large or intense the glow appears. Set the glow size based on your style needs. In this example, the value is set to 20.

Animation Loop: Controls whether the glow effect repeats continuously. You will find two options: Play Once and Infinite.

Repeat Animation: Controls whether the glow animation plays again when the element re-enters the viewport. In this example, Play once is selected.

Final Output of Glow Plus (if you choose Play Once):

Final Output of Glow Plus (Infinite)

TypeWriter

Type Writer Animation makes text appear one character at a time, just like typing on a keyboard.

Duration (ms): Controls how long the typing animation takes to complete. In this example, the duration is set to 1000, but you can set any value based on your preference.

Delay (ms): Controls how long the animation waits before starting. In this example, the delay is set to 0.04 ms. However, you can set any value based on your preference.

Easing: Controls the way the animation’s speed changes during the scaling effect.

Common easing types:

Linear → moves at the same speed from start to finish
Ease In → starts slowly and then accelerates
Ease Out → begins quickly and slows down toward the end
Ease In Out → slow at the beginning, faster in the middle, and slow again at the end
Smooth Cubic → creates a very smooth and natural-looking motion
Elastic Feel → adds a soft spring-like bounce before the animation ends

In this example, Ease In is selected. However, you can choose any easing type based on your preference.

Repeat Animation: Controls whether the typing animation runs again when the element re-enters the viewport. You will find two options: Play Once and Everytime. In this example, Play Once is selected. However, you can choose either option based on your preference.

Final Output of Typewriter:

Mask Wipe

Mask Wipe Animation reveals text using a colored overlay that slides across the text like a wipe effect.

Duration (ms): Controls how long the wipe animation takes to complete. In this example, the duration is set to 800 ms. However, you can set any value based on your preference.

Delay (ms): Controls how long the animation waits before starting. In this example, the delay is set to 0.04 ms. However, you can set any value based on your preference.

Easing: Controls how the animation’s speed increases and decreases during the scaling effect.

Common easing types:

Linear → keeps a steady speed from beginning to end
Ease In → starts slowly and gradually speeds up
Ease Out → begins fast and slows down toward the end
Ease In Out → slow at the start, faster in the middle, and slow again at the end
Smooth Cubic → produces a smooth and natural motion
Elastic Feel → creates a light spring-like bounce before the animation finishes

In this example, Ease In is selected as the easing type. However, you can choose any option based on your preference.

Mask Color: Controls the color of the covering mask that moves across the text. Choose any color based on your style needs. In this example, black is selected.

Repeat Animation: Controls whether the wipe animation plays again when the element re-enters the viewport. You will find two options: Play Once and Every Time. In this example, Play Once is selected.

Final Output of Mask Wipe:

Water Wave

Water Wave Animation fills the text with a moving wave effect, similar to water flowing inside the letters.

Duration (ms): Controls how long the wave animation takes to complete one movement cycle. In this example, the duration is set to 800 ms. However, you can set any value based on your preference.

Delay (ms): Controls how long the animation waits before starting. Here, the delay is set to 0.04 ms. However, you can set any value based on your preference.

Easing: Adjusts how the animation’s speed changes while the scaling effect is applied.

Common easing types:

Linear → maintains the same speed from start to finish
Ease In → begins slowly and then gains speed
Ease Out → starts quickly and gradually slows down
Ease In Out → slow at the beginning, faster in the middle, and slow again near the end
Smooth Cubic → delivers a very smooth and natural transition
Elastic Feel → adds a subtle spring-like bounce before the animation settles

In this example, Ease In Out is selected as the easing type. However, you can choose any option based on your preference.

Wave Fill Color: Controls the color of the wave that fills the text. In this example, Turquoise color is selected. However, you can choose any color based on your style needs.

Repeat Animation: Controls whether the wave animation plays again when the element re-enters the viewport. In this example, Play Once is selected. However, you can choose either option based on your preference.

Final Output Of Water Wave:

Background Clip Text

Background Clip Text Animation fills the text with a background image or pattern that is clipped inside the letters.

Duration (ms): Controls how long the entrance animation takes when the text first appears. In this example, the duration is set to 800 ms, however, you can set any value according to your choice.

Delay (ms): Controls how long the animation waits before starting.

Easing: Controls how the animation speed changes during the scaling effect.

Common easing types:

Linear → constant speed
Ease In → starts slow
Ease Out → ends slow
Ease In Out → smooth start and end
Smooth Cubic → very smooth motion
Elastic Feel → spring-like bounce effect

In this example, Ease In Out is selected. However, you can choose any option based on your preference.

Background Image: Sets the image used to fill the text.

Animation Speed (seconds): Controls how fast the background image moves inside the text. In this example, the animation speed is set to 30. However, you can set any value based on your design needs.

Final Output of Background Clip Text:

Character Animation

Character Animation applies animation to each letter individually instead of the whole text block.

Duration (ms): Controls how long each character’s animation takes to complete. In this example, the duration is set to 600 ms. However, you can set any value based on your design needs.

Delay (ms): Controls the delay between character animations.Controls the delay between each character animation. In this example, the delay is set to 50 ms, but you can adjust it as needed.

Easing: Controls how the animation accelerates and slows.

Common easing types:

Linear → steady speed
Ease In → slow start
Ease Out → slow end
Ease In Out → smooth start and end
Smooth Cubic → smooth motion
Elastic Feel → bounce effect

In this example, Ease In Out is chosen. However, you can select any easing type based on your requirements.

Character Preset: Controls the animation type applied to each letter. You will find options such as Revolve Scale, Ball Drop, Side Hustle, Resolve Drop, Drop Vanish, and Twister.

Note: You can adjust the values for each animation type to achieve different animation effects. There are no fixed rules for setting these values.

Repeat Animation: Controls whether the animation runs again when the text re-enters the viewport. In this example, Play Once is selected. However, you can choose either option based on your preference.

Below are demo examples of each Character Preset animation:

Final Output of Revolve Scale Character Animation

Final Output of Ball Drop Character Animation

Final Output of Side Hustle, Character Animation

Final Output of Drop Vanish Character Animation

Final Output of Twister Character Animation