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.

Every interaction in Kirki is made up of two parts:

• Trigger – What initiates the animation (a click, a hover, a scroll).

• Response – The visual effect that plays in response.

Add an Interaction

1. Select any element on the canvas (or the entire Page from Layers).

2. Click the Interaction tab in the Right Panel.

3. If the element has no interactions yet, click Add trigger + to get started. 

4. If the element does have interactions added already, click the plus (+) icon next to Trigger to choose another one.

Select a Trigger

Choose what initiates the animation. Triggers fall into two categories:

Element Triggers

These are tied to a specific element on the page.

• Click (Tap) – Runs the animation when the element is clicked.

• Hover – Runs the animation when the mouse hovers over the element.

• Mouse Move Over Element – Continuously runs the animation as the mouse moves over the element.

• While Element is Scrolling – Runs the animation based on the element’s position as it scrolls through the viewport.

• Scroll Into View – Starts the animation when the element enters the viewport.

Page Triggers

Activated by changes in the overall page state. To use these, select the Page from the Layers panel instead of an element.

• Mouse Move on Viewport – Runs the animation as the mouse moves anywhere on the page.

• While Page is Scrolling – Activates while the page is being scrolled.

• Page Load – Activates as soon as the page loads.

• Scroll Into View – Starts the animation when a specific element enters the viewport.

• Page Scrolled – Activates when the user scrolls up or down.

Add a Response

Once a trigger is set, click the plus (+) icon next to the initial trigger state (1st Click, Scrolled Into, etc) to define what happens. You’ll see two options:

• Set New – Opens the Response Editor to build a fully custom animation.

• Library – Choose from a set of ready-made animation presets.

Use the Animation Library

Select Library to access ready-to-use animation presets that you can apply in one click to the selected element. 

Available presets include:

• Fade
• Back
• Slide
• Light-Speed
• Flip
• Bounce
• Marquee
• Cursor Trail

Use the Response Editor

Select Set New to open the Response Editor and build a fully custom animation. 

Unlike the Library, you can target the selected element, a different element, and even multiple elements at once, giving you full 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 third option alongside Set New and Library. 

Text Animations offers preset animation styles designed specifically for text elements that you can further customize to make them your own.

Learn more about Text Animations.

Cursor Trail

Cursor Trail is a preset available in the Animation Library that creates a visual effect following the user’s mouse as it moves across the page. Instead of animating a single element in response to a trigger, it continuously emits a trail of elements that flow behind the cursor in real time.

Learn more about Cursor Trail.