Animated Text
Updated over a week ago

The Animated Text widget allows you to create captivating and animated text sequences.

With Type, you can choose the target of animation. You can select from:

  • chars, to move every char of the text;

  • words, to separate the text into single words and animate each of them;

  • lines, to separate text on each line break and animate each of them.

With Trigger you can decide when the animation starts:

  • animation, to start immediately on page load;

  • scroll, if you want to wait until the user scrolls over this element.

Text

Here you can insert all the texts that will be used during the animation. You can set multiple texts, add new ones and reorder them with the repeater control.
โ€‹

You can set different styles for each one of them, thanks to standard style controls.

Leave -1 for an infinite loop, 0 to show it once and hide it or set a number of the max execution time of the animation.

Animations

You can play with both IN and OUT animations.

  • Animation style, set the position for every element and start to execute the animation;

  • Origin, the position of the animation related to the element;

  • Speed, how quickly the single element is animated;

  • Amount, the time between one animation and a new one. Before a new one starts, the previous one has to be over;

  • Delay, time in second after the first element animation starts;

  • Easing, the effect applied to the animation;

  • Equation, the easing equation, see them in action on https://easings.net/.

Did this answer your question?