Text Animation is one of the animation types in Kirki’s Interaction Library, the built-in set of ready-to-use motions you can apply to any element. Text Animation animates any text element in or out, character by character, word by word, or as a whole element.

Add Text Animation

1. Select a text element on the canvas.

2. Open the Interaction tab in the Right Panel.

3. From the Interaction Library, select Text Animation.

Set Trigger

Set when the animation runs from the Trigger dropdown. Choose from:

• Scroll

• Hover In

• Hover Out

• Scroll Into View

Define Direction

Use the Animation toggle to set whether the text animates In or Out.

Choose From Text Animation Presets

Open the Preset dropdown and pick an animation style:

• Blur – Reveals text by transitioning from a blurred state.

• Flip – Rotates text to create a flipping motion.

• Shoot – Animates text into place with a rapid movement effect.

• Scale – Expands or contracts the text for a zoom-like effect.

• Rotate – Rotates text at various angles.

• Shake – Adds a shaking motion for emphasis.

• Stagger – Animates text progressively with a cascading effect.

Or select Custom to build your own. Each preset sets its own default effects and timing, which you can further customize below.

Set How the Animation Applies to Text

From the Apply On dropdown to control how the animation is applied to the text:

• Character – Animates each character separately.

• Words – Animates each word individually.

• Element – Animates the entire text block as one unit.

Adjust Timing

In the Timing section, set:

• Delay – How long to wait before the animation starts, in milliseconds.

• Duration – How long the animation takes to complete, in milliseconds.

• Wait – How long to wait between each unit’s animation, in milliseconds, to create a staggered sequence.

• Curve – The easing style, chosen from Linear, Ease, Ease In, Ease Out, or Ease In Out.

Click the graph icon next to the Curve dropdown to open the Timing Editor for finer control.

Edit Effects

The Effects section shows which properties animate and their values. Click the plus (+) icon to add an effect:

• Move
• Skew
• Scale
• Rotate
• Opacity
• Blur

Each effect you add gets its own field where you can set its value. 

To remove an effect, click the minus (–) icon next to it. 

Learn more about Transform and Filter effects in Kirki.

For other animation types like Self Reveal, Children Reveal, Item Stacking, and more, check out the Interaction Library.