Text Effects
MotionFlow Text animates inline text content, enabling smooth looping transitions and realistic typing effects. All text animations share a common configuration model, while each animation type provides its own specialized attributes and behavior.
# Getting started
MotionFlow Text animates inline text content using two built-in modes: Loop (rotating text items) and Typing (character-by-character typing effect).
Text animations start automatically as soon as the page loads. They do not depend on scroll position or viewport triggers.
No initialization required. No configuration required. Simply add the appropriate data-mf-text-* attributes and MotionFlow handles everything automatically.
<!-- Loop mode -->
<span data-mf-text-type="loop">
<span>fast</span>
<span>smooth</span>
<span>lightweight</span>
</span>
<!-- Typing mode -->
<span data-mf-text-type="typing">
<span>MotionFlow</span>
<span>Text Animations</span>
</span>Both modes treat each direct child element as an individual text item and animate them sequentially using their respective behaviors.
# Loop mode
Loop mode cycles through multiple text items one by one using the animation engine.
Each direct child element inside the container is treated as an individual loop item and animated sequentially in an infinite loop, without requiring any user interaction.
Loop mode is best suited for rotating keywords or short phrases where continuous motion is desired without relying on scroll position.
Build fastsmoothlightweight websites
<div
data-mf-text-type="loop"
data-mf-text-loop-animation="fade-up"
data-mf-text-loop-interval="2000"
data-mf-text-loop-duration="500"
data-mf-text-loop-distance="20"
data-mf-text-loop-easing="ease"
>
<span>fast</span>
<span>smooth</span>
<span>lightweight</span>
</div>You don’t need to add every attribute. MotionFlow has default values for all attributes. Default values are listed in the table below. Add an attribute only when you want to override the default.
| Attribute | Default | Description |
|---|---|---|
data-mf-text-type | — | Set to loop to enable loop mode |
data-mf-text-loop-animation | fade-up | MotionFlow animation applied to each text item |
data-mf-text-loop-interval | 2000 | Delay (in milliseconds) before switching to the next item |
data-mf-text-loop-duration | 500 | Duration (in milliseconds) of each loop animation |
data-mf-text-loop-easing | ease | Easing function used for loop animations |
data-mf-text-loop-distance | 40 | Translate distance in pixels |
## Animation types
Loop mode supports multiple animation styles listed below. The selected animation is applied to each text item as it becomes active in the loop.
| Animation | Usage | Description |
|---|---|---|
| fade | data-mf-text-loop-animation="fade" | Simple fade in with no movement |
| fade-up | data-mf-text-loop-animation="fade-up" | Fades in while moving upward |
| fade-down | data-mf-text-loop-animation="fade-down" | Fades in while moving downward |
| fade-left | data-mf-text-loop-animation="fade-left" | Fades in while moving from left |
| fade-right | data-mf-text-loop-animation="fade-right" | Fades in while moving from right |
| fade-up-left | data-mf-text-loop-animation="fade-up-left" | Fades in from bottom-left |
| fade-up-right | data-mf-text-loop-animation="fade-up-right" | Fades in from bottom-right |
| fade-down-left | data-mf-text-loop-animation="fade-down-left" | Fades in from top-left |
| fade-down-right | data-mf-text-loop-animation="fade-down-right" | Fades in from top-right |
| slide-up | data-mf-text-loop-animation="slide-up" | Slides upward into view |
| slide-down | data-mf-text-loop-animation="slide-down" | Slides downward into view |
| slide-left | data-mf-text-loop-animation="slide-left" | Slides in from left |
| slide-right | data-mf-text-loop-animation="slide-right" | Slides in from right |
| zoom-in | data-mf-text-loop-animation="zoom-in" | Scales up while fading in |
| zoom-out | data-mf-text-loop-animation="zoom-out" | Scales down while fading in |
| zoom-in-up | data-mf-text-loop-animation="zoom-in-up" | Zooms in from bottom |
| zoom-in-down | data-mf-text-loop-animation="zoom-in-down" | Zooms in from top |
| zoom-in-left | data-mf-text-loop-animation="zoom-in-left" | Zooms in from left |
| zoom-in-right | data-mf-text-loop-animation="zoom-in-right" | Zooms in from right |
| zoom-out-up | data-mf-text-loop-animation="zoom-out-up" | Zooms out upward |
| zoom-out-down | data-mf-text-loop-animation="zoom-out-down" | Zooms out downward |
| zoom-out-left | data-mf-text-loop-animation="zoom-out-left" | Zooms out to left |
| zoom-out-right | data-mf-text-loop-animation="zoom-out-right" | Zooms out to right |
| flip-up | data-mf-text-loop-animation="flip-up" | Flips upward along X-axis |
| flip-down | data-mf-text-loop-animation="flip-down" | Flips downward along X-axis |
| flip-left | data-mf-text-loop-animation="flip-left" | Flips from left along Y-axis |
| flip-right | data-mf-text-loop-animation="flip-right" | Flips from right along Y-axis |
| rotate | data-mf-text-loop-animation="rotate" | Rotates into place |
| rotate-up-left | data-mf-text-loop-animation="rotate-up-left" | Rotates upward from left |
| rotate-up-right | data-mf-text-loop-animation="rotate-up-right" | Rotates upward from right |
| rotate-down-left | data-mf-text-loop-animation="rotate-down-left" | Rotates downward from left |
| rotate-down-right | data-mf-text-loop-animation="rotate-down-right" | Rotates downward from right |
| blur | data-mf-text-loop-animation="blur" | Fades in while removing blur |
| blur-up | data-mf-text-loop-animation="blur-up" | Blurs + fades in while moving upward |
| blur-down | data-mf-text-loop-animation="blur-down" | Blurs + fades in while moving downward |
| blur-left | data-mf-text-loop-animation="blur-left" | Blurs + fades in while moving from left |
| blur-right | data-mf-text-loop-animation="blur-right" | Blurs + fades in while moving from right |
| hinge | data-mf-text-loop-animation="hinge" | Hinged rotation from the top (center origin) |
| hinge-left | data-mf-text-loop-animation="hinge-left" | Hinged rotation from top-left corner |
| hinge-right | data-mf-text-loop-animation="hinge-right" | Hinged rotation from top-right corner |
| lightspeed-left | data-mf-text-loop-animation="lightspeed-left" | Fast skewed slide-in from left |
| lightspeed-right | data-mf-text-loop-animation="lightspeed-right" | Fast skewed slide-in from right |
| roll-left | data-mf-text-loop-animation="roll-left" | Rolls in from left while rotating |
| roll-right | data-mf-text-loop-animation="roll-right" | Rolls in from right while rotating |
| back-in-up | data-mf-text-loop-animation="back-in-up" | Enters from below, pauses briefly, then scales to full size |
| back-in-down | data-mf-text-loop-animation="back-in-down" | Enters from above, pauses briefly, then scales to full size |
| back-in-left | data-mf-text-loop-animation="back-in-left" | Enters from the left, pauses briefly, then scales to full size |
| back-in-right | data-mf-text-loop-animation="back-in-right" | Enters from the right, pauses briefly, then scales to full size |
| bounce | data-mf-text-loop-animation="bounce" | Bounces into place with subtle vertical movement |
| bounce-up | data-mf-text-loop-animation="bounce-up" | Bounces upward from below the viewport |
| bounce-down | data-mf-text-loop-animation="bounce-down" | Bounces downward from above the viewport |
| bounce-left | data-mf-text-loop-animation="bounce-left" | Bounces in from the left side |
| bounce-right | data-mf-text-loop-animation="bounce-right" | Bounces in from the right side |
| bounce-scale | data-mf-text-loop-animation="bounce-scale" | Bounces using scale only (no directional movement) |
| bounce-rotate | data-mf-text-loop-animation="bounce-rotate" | Bounces into place with rotation and scaling |
## Easing
Control the feel of loop transitions using easing presets. The available options are listed below.
| Easing preset | Usage |
|---|---|
| linear | data-mf-text-loop-easing="linear" |
| ease | data-mf-text-loop-easing="ease" |
| ease-in | data-mf-text-loop-easing="ease-in" |
| ease-out | data-mf-text-loop-easing="ease-out" |
| ease-in-out | data-mf-text-loop-easing="ease-in-out" |
| ease-in-back | data-mf-text-loop-easing="ease-in-back" |
| ease-out-back | data-mf-text-loop-easing="ease-out-back" |
| ease-in-out-back | data-mf-text-loop-easing="ease-in-out-back" |
| ease-in-sine | data-mf-text-loop-easing="ease-in-sine" |
| ease-out-sine | data-mf-text-loop-easing="ease-out-sine" |
| ease-in-out-sine | data-mf-text-loop-easing="ease-in-out-sine" |
| ease-in-quad | data-mf-text-loop-easing="ease-in-quad" |
| ease-out-quad | data-mf-text-loop-easing="ease-out-quad" |
| ease-in-out-quad | data-mf-text-loop-easing="ease-in-out-quad" |
| ease-in-cubic | data-mf-text-loop-easing="ease-in-cubic" |
| ease-out-cubic | data-mf-text-loop-easing="ease-out-cubic" |
| ease-in-out-cubic | data-mf-text-loop-easing="ease-in-out-cubic" |
| ease-in-quart | data-mf-text-loop-easing="ease-in-quart" |
| ease-out-quart | data-mf-text-loop-easing="ease-out-quart" |
| ease-in-out-quart | data-mf-text-loop-easing="ease-in-out-quart" |
| ease-in-quint | data-mf-text-loop-easing="ease-in-quint" |
| ease-out-quint | data-mf-text-loop-easing="ease-out-quint" |
| ease-in-out-quint | data-mf-text-loop-easing="ease-in-out-quint" |
| ease-in-expo | data-mf-text-loop-easing="ease-in-expo" |
| ease-out-expo | data-mf-text-loop-easing="ease-out-expo" |
| ease-in-out-expo | data-mf-text-loop-easing="ease-in-out-expo" |
| ease-in-circ | data-mf-text-loop-easing="ease-in-circ" |
| ease-out-circ | data-mf-text-loop-easing="ease-out-circ" |
| ease-in-out-circ | data-mf-text-loop-easing="ease-in-out-circ" |
| ease-in-elastic | data-mf-text-loop-easing="ease-in-elastic" |
| ease-out-elastic | data-mf-text-loop-easing="ease-out-elastic" |
| ease-in-out-elastic | data-mf-text-loop-easing="ease-in-out-elastic" |
| ease-in-bounce | data-mf-text-loop-easing="ease-in-bounce" |
| ease-out-bounce | data-mf-text-loop-easing="ease-out-bounce" |
| ease-in-out-bounce | data-mf-text-loop-easing="ease-in-out-bounce" |
# Typing mode
Typing mode simulates a realistic typing and deleting effect by revealing text character by character.
Each direct child element inside the container is treated as a separate phrase that is typed, erased, and optionally repeated in sequence.
Typing mode works well for dynamic headings, introductions, and short messages where character-level animation adds emphasis and personality.
MotionFlowText AnimationsMade Simple
<div
data-mf-text-type="typing"
data-mf-text-typing-speed="80"
data-mf-text-typing-delete-speed="40"
data-mf-text-typing-interval="1200"
data-mf-text-typing-loop="true"
data-mf-text-typing-cursor="true"
data-mf-text-typing-cursor-char="|"
data-mf-text-typing-cursor-blink="true"
>
<span>MotionFlow</span>
<span>Text Animations</span>
<span>Made Simple</span>
</div>You don’t need to add every attribute. MotionFlow has default values for all attributes. Default values are listed in the table below. Add an attribute only when you want to override the default.
| Attribute | Default | Description |
|---|---|---|
data-mf-text-type | — | Set to typing to enable typing mode |
data-mf-text-typing-speed | 80 | Typing speed in milliseconds per character |
data-mf-text-typing-delete-speed | 40 | Deleting speed in milliseconds per character |
data-mf-text-typing-interval | 1200 | Pause (in milliseconds) after typing completes, before deleting begins |
data-mf-text-typing-loop | true | Controls whether the typing sequence repeats |
data-mf-text-typing-cursor | true | Show or hide the typing cursor |
data-mf-text-typing-cursor-char | | | Character used as the typing cursor |
data-mf-text-typing-cursor-blink | true | Enable or disable cursor blinking |
When looping is disabled, typing stops after the final phrase is fully typed and the cursor is hidden automatically.
# Text effects lifecycle
Text effects (loop and typing) initialize automatically when the page loads. In most cases, no manual control is required.
If text elements are added dynamically, shown later (for example inside accordions, tabs, or modals), or their content changes, you can control the text effects lifecycle using the methods below.
| Method | Method call | Description |
|---|---|---|
| init | MotionFlow.text.init(); | Initializes or re-initializes text effects using the last configuration |
| refresh | MotionFlow.text.refresh(); | Rebuilds text effects and retries initialization for newly added or updated text elements |
| destroy | MotionFlow.text.destroy(); | Stops and removes all active text effects and restores the original content |
## Example usage
When text elements become visible dynamically or are injected into the DOM, refresh the text engine to ensure effects are initialized correctly.
// Call this after text elements are added or shown
function onTextLayoutChange() {
MotionFlow.text.refresh();
}
# Global configuration (optional)
Text effects work automatically using HTML attributes. You only need global configuration if you want to change default behavior or reuse the same settings across multiple elements.
Individual elements can still override these values using data-mf-text-* attributes.
MotionFlow.init({
text: {
/* --------------------------------
Loop text
--------------------------------- */
loop: {
animation: "fade-up", // Default : fade-up | fade-up | slide-up | slide-down | zoom | etc
interval: 2000, // Default : 2000 | Time between text changes (ms)
duration: 500, // Default : 500 | Animation duration (ms)
easing: "ease", // Default : ease | Any MotionFlow easing preset
distance: 40 // Default : 40 | Translate distance in pixels
},
/* --------------------------------
Typing text
----------------------------------- */
typing: {
speed: 80, // Default : 80 | Typing speed (ms per character)
deleteSpeed: 40, // Default : 40 | Deleting speed (ms per character)
interval: 1200, // Default : 1200 | Pause before deleting (ms)
loop: true, // Default : true | Loop typing animation
cursor: true, // Default : true | Show typing cursor
cursorChar: "|", // Default : "|" | Cursor character
cursorBlink: true // Default : true | Blinking cursor animation
}
}
});If you don’t provide any text configuration, MotionFlow uses sensible built-in defaults automatically.