Animated Letters Advanced element lets you create fluid letter-staggered animations for titles and text.
🎨 Styling animated letters
Choose from a variety of options to style and customize the Animated Letters Advanced element. First, click the element to access the text styles, then select the text box to animate the field.
Font Family: Select the font
Style: Set the weight of your text
Alignment: Set the position of your text
Size: Set text size in pixels or ems
Line height: Set text line height in pixels or ems
Word spacing: Set the space between words in pixels or ems
Letter spacing: Set the space between letters in pixels or ems
Color: Set the text color
⚙️ Configuration options
Double-clicking the Animated Letters Advanced element on your canvas opens the configuration options. From here, you can set different parameters such as text, loop, preset animations, and more.
Configuration options are detailed in the chart below.
Parameter | Options |
Text | Add the text you want to animate. |
Loop | Set the animation to loop continuously. |
Run once | Set the animation to run once. |
Start delay | Set how long the animation should wait before starting in milliseconds. |
Loop delay | Set how long the animation should last in milliseconds. |
Easing | Adjust the acceleration of the animation's transition. |
Delay presets | Select a pre-built animation's transition. |
Fade | Control the opacity transition of the text. |
Scale | Control the size transition of the text in rems. |
Move | Control the text's position on the X, Y, and Z axis. |
Rotate | Control the text's rotation on the x, y, and Z axis. |
States
For each of the effects (Fade, Scale, Move, Rotate), you can add more than one animation state. For example, you can set the size of the text to go from 1rem to 1.2rems in the first state and then set it to go from 1.2rems to 1.5rems so it increases its size progressively. Combining effects and states will allow you to animate your text amazingly. Free your imagination! 💭
Adding a state
Double-click the element
At the bottom, click on the + icon
You'll be able to navigate between states with the navigation dots at the bottom of the panel.
Removing a state
Double-click the element
Next to the Add some more! field, click the trash icon