Get Bricksfusion BLACKFRIDAY DealUntil month-end

Documentation

v1.5.0

Text Motion

PREVIEW

Wave animation

Fade In animation

Slide In animation

Rotate In animation

Elastic Pop animation

Blinds animation

Glitch animation

Refresh animations

What is it?

Text Motion is triggered when the text comes into the viewport and uses GSAP to animate text by splitting it into different parts (characters, words, or lines). The type of animation, speed, and the way text is split can be customized using specific attributes.

How to set it up?

This element is customized using the Bricks Builder attributes field. Text Motion utilizes four main attributes:

'data-bricks-texteffect'. Activates the text effect for a specific element. Required to enable the animation.

'data-bricks-texteffect-type' (Optional). Determines how the text is split for the animation. Accepted values:

  • chars (default): Splits the text into individual characters.
  • words: Splits the text into words.
  • lines: Splits the text into lines.

'data-bricks-texteffect-animation' (Optional). Defines the animation type to be applied. Accepted values:

  • fadeIn (default)
  • slideIn
  • scaleIn
  • rotateIn
  • elasticPop
  • blinds
  • wave
  • glitch

'data-bricks-texteffect-speed' (Optional). Sets the animation speed. The default is 1. Lower values slow down the animation, while higher values speed it up.