FX – Lively Text

The FX – Lively Text widget allows you to display text that moves and breathes right before your eyes. With effect animations built into the widget, it's easy to audition and apply attention-grabbing style to headlines or important throughout your site.

The FX series of widgets are built with simplicity in mind, providing one dedicated effect per widget that can be applied quickly – keeping you in the zone as you work on your site.


Preview: https://demo.wocode.com/fx-lively-text

Tutorial Video

Setup

WIDGET PLACEMENT AND SIZING

  • Drop the widget into your site and place it into a row or column where you would like the lively text to display.

WIDGET OPTIONS

  • Open the widget option panel.
  • Unique ID: This field should be updated when multiple FX – Lively Text widgets are used on the same page. One trick we like to use is to enter a new, non-default Unique ID in the first widget, before adding the 2nd widget. This way, neither widget is ever sharing the same Unique ID.
  • Text Effect: The effect that is applied to the text. There are 5 different effects to choose from.
  • Text: The text that will be displayed with the applied effect.
  • Alternative Mobile Text: When enabled, this makes the Mobile Text field visible within the content panel.
  • Mobile Text: Visible only when the Alternative Mobile Text toggle is enabled, this allows mobile-specific text to be added to the widget. With this text field, you can apply a line break between words by simply using the enter key. This is useful when you have multiple words that don't fit on the screen on the smaller mobile layout. 

DESIGN SETTINGS

The Design section allows you to customize the look and feel of lively text.

  • Line Padding Vertical (px): Applies top padding to the text within the widget.
  • Line Padding Horizontal (px): Applies left padding to the text within the widget.
  • Text Styling: This panel will control the traditional text styling options for this widget, such as font, font size, font color, etc.
  • Channel Split Effect Styling: Controls the look and feel of the channel split effect.

Apply Blur: When animated, a blur will be applied to the effect.

Animate Noise: When enabled, the noise produced by the effect will be animated.

Split Offset: Affects separation distance between the layers of text.

Split Rotation (deg): Sets the angle of the split text. For example, setting this to 90 (degrees) will display the text vertically, and a setting of 180 (degrees) will display the text horizontally.

  • Flies Effect Styling: This panel controls the look and feel of the Flies effect.

Cell Count: Adjusts how many cells are used to create the text. A higher cell width will result in less cells, and a lower cell width will result in more cells. Going too far in either direction can result in the text being illegible. To avoid this, we recommend keeping the cell width somewhere between 8-25.

Cell Size: Adjusts the size of the cells (flies) in the effect.

Cell Speed: Sets how fast the effect will animate.

  • Liquid Distort Effect Styling: This panel controls the look and feel of the Liquid Distort effect.

Effect Speed: Sets how fast the effect will animate.

Effect Strength: Adjusts how strong or weak the effect will be displayed. Setting this effect to high will cause the text to be illegible. To maintain legible text, we recommend not exceeding roughly 35 for the effect strength.

Rolling Distort Effect Styling: This panel controls the look and feel of the Rolling Distort effect.

Distort Spread: Controls the space between each cycle in the animation.

Cycle Count: Sets how many cycles are displayed in the animation.

Distort Amplitude: Sets the strength of the animation.

Distort Rotation: Sets the angle of the animation based on a circle. For example, 180 (degrees) would make the animation go from bottom the top, and 270 makes the animation go from left to right.

Distort Speed: Controls the speed of the animation.

  • Sliding Door Effect Styling: This panel controls the look and feel of the Sliding Door effect.

Division: Sets how many slices will occur in the text during the animation. 

Division Width: Sets how large the slices of text will be when they animate in and out. 

Animate Horizontally: When enabled, will animate the text in horizontally instead of vertically. 

Flip Direction: When enabled will flip the animation direction of the text. 

Animation Speed: Sets the speed of the animation.