Text Animations in Kirki let you add dynamic movement to text elements – helping capture attention, create engaging experiences, and give your designs a polished feel.

Add Text Animation

1. Select a text element on the canvas.

2. Open the Interaction tab in the Right Panel.

3. Add a trigger (e.g., Scroll Into View, Click, Hover).

4. Click the plus (+) icon next to the initial trigger state and hover over Text Animation to reveal the preset options.

5. Select a preset to apply it – this adds a Text Animation response to the trigger.

6. Click the response to open the editor and customize the animation further.

Text Animation Presets

Hovering over Text Animation reveals a list of presets to choose from as your starting point:

• 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.

Set How the Animation Applies to Text

Once a preset is applied, click the response to open the editor. Use the Apply To 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.

Switch Animation Preset

From the same text animation editor, click the Type dropdown to switch the animation preset if you want to try a different style without removing and re-adding the animation.

Customize Animation

Fine-tune your animation using the controls in the editor:

• Wait – The pause between each character or word as it animates in (in ms).

• Scale – Makes text grow or shrink during the animation.

• Blur – Applies a blur level to the text for smooth fade-ins or motion blur effects.

• Skew X / Y – Tilts the text along the X or Y axis for a slanted effect.

• Offset X / Y – Shifts the text’s starting position for directional movement before it settles into place.

• Rotate X / Y / Z – Rotates the text along any axis.

• Loop – Toggle whether the animation repeats continuously.

• Repeats – Set how many times the animation plays before stopping.

Edit Transition

Click Custom Timing Editor at the bottom of the panel to fine-tune how the animation transitions. You can choose between Ease and Spring timing modes.

Learn more about the Custom Timing Editor.