Text Animations

Animate text on your site using a large selection of animation styles, as well as extensive customization and styling options. Great for headlines!

Demo: https://demo.wocode.com/text-animations

Tutorial Video

Version Log:

  • 1.1: Recalculated delay timing to improve performance of the Initial Delay Before Animation parameter. (10-16-2018)
  • 1.0: Initial release

Setup

WIDGET SETUP IN ARCHITECT

  • Drop the Text Animations widget into your site.
  • Unique ID: This ID allows you to use multiple Text Animation widgets on the same page. Make sure all Text Animations widgets have individual ID’s.
  • Text: Place the text to be animated here.
  • Heading Type: This setting allows you to set Heading Tags such as H1, H2, or H3. Use “None” for paragraph text.

ANIMATION SETTINGS

  • Animation Style: This allows you to choose the animation style for your animated text. Animations will be seen in the editor, so it is not necessary to preview or publish to see animation styles.Note: if looping is enabled, you will not see the looped animation in the editor. See “Loop Settings” for more details.
  • Initial Delay Before Animation: This creates a delay before animation takes place.
  • Character Animation Speed: This setting determines the time that characters take to animate.
  • Delay Time Between Character Animations: This setting sets the time between animation of characters. Increase this setting if you wish to increase the effect of characters animating individually.
  • Random Character Sequence: This setting randomizes the animation of character animations.
  • Animate All Characters At Once: This setting animates all of the text at the same time. Use this if you do not want characters to animate individually.

LOOP SETTINGS

  • Loop Animation: This setting enables the looping of your animated text. Looping will continue indefinitely.Note: Looping animations will not be seen in the editor or in Preview mode. You will see the initial animation, but not looped animations. This ensures a lag-free editing environment.
  • Animation Style (Out): This setting allows you to set a secondary animation style for looped animations. The primary animation style will be used as the animated text appears, and the Animation Style (Out) will be seen when the text exits.
  • Exit Time For Each Character: This setting is similar to the Character Animation Speed setting described above. With looped animations, this represents the time for each character to exit.
  • Delay Before Exiting Character: This setting is similar to the Delay Time Between Character Animations setting described above. With looped animations, this represents a delay in the time between each character’s exit.
  • Exit in Random Character Sequence: Similar to the Random Character Sequence above, this setting allows characters to exit in a random sequence.
  • Exit All Characters At Once: Similar to the Animate All Characters At Once setting above, this setting allows all characters to exit at once.

DESIGN SECTION

The settings in the Design Section allow you to style the text in your Text Animation. These settings are self explanatory. Each settings performs the action in which it is labeled.