An interaction is any visual movement or response that happens between a user and a website – an element fading in as it scrolls into view, growing on hover, or shifting position as the page loads.
You can build interactions two ways: choose a ready-to-use interaction from the Interaction Library, or create something that’s fully custom in the Interaction Response Editor.
Add an Interaction
- Select any element on the canvas (or the entire Page from Layers).
- Click the Interaction tab in the Right Panel.
- If the element has no interactions yet, select any Trigger to create a custom interaction, or pick a premade interaction from the Interaction Library.
- If the element already has interactions, click Trigger or Library to add another.
Use the Interaction Library
The Interaction Library is the fastest way to bring your website to life with motion in Kirki. Choose from a growing library of ready-to-use interactions and apply them instantly to text, images, buttons, cards, or entire sections – all with just one click.
The library includes the following animation types:
- Self Reveal
- Children Reveal
- Text Animation
- Parallax Scroll
- Item Stacking
- Ticker
- Cursor Parallax
- Follow Cursor
Each comes with its own set of options, so you can use them as-is or fine-tune them easily to better fit your design.
Learn more about the Interaction Library.
Use the Interaction Response Editor
Select any Trigger to access the Interaction Response Editor and build a fully custom animation.
With this method, you can target the selected element, a different element, and even multiple elements at once, giving you more control over what animates and when.
Depending on the trigger, the Response Editor adjusts its mode:
- For time-based triggers like Click or Hover, it works as a timeline.
- For scroll-driven triggers like While Element is Scrolling or While Page is Scrolling, it switches to a progress-based view where the animation is tied to how far the user has scrolled.
Learn more about the Interaction Response Editor.
Text Animations
When a text element is selected, you’ll see a Text Animation type in the Interaction Library.
Text Animations offer preset animation styles designed specifically for text elements that you can further customize to make them your own.
Learn more about Text Animations.