The Spring timing function in Kirki adds life to your animations by simulating real-world physics. Instead of moving in a linear way, elements can bounce, overshoot, and settle naturally. This makes interactions feel more responsive and human.

Where to Find It

The Spring timing function is accessible in four places:

• Transitions – Directly in the Transition editor.

• Interaction Response Editor – Via the Custom Timing Editor, which you can open using the graph icon in the Action Settings Column.

• Animation Editor – via the Custom Timing Editor button.

• Text Animation – via the Custom Timing Editor button.

Each case opens the Custom Timing Editor, giving you access to the Spring tab.

Add Spring Transition

1. Access the Custom Timing Editor from any of the methods mentioned above.

2. Switch to the Spring tab.

3. Configure the settings to customize the effect.

Customize Spring Transition

Once on the Spring tab, adjust the following properties:

1. Duration – Controls how long the animation takes to complete. Short values feel fast and snappy. Long values feel slow and smooth.

2. Delay – Sets a wait time before the animation starts.

3. Bounce – Defines how much the element overshoots and oscillates before settling. Low values mean subtle bounce. High values mean playful, elastic bounce.

A waveform preview updates in real time. Hover over it to preview the motion before applying.

Example: Scale a Button on Hover with a Spring Transition

When users hover the button, it scales up with a springy motion and settles back when the cursor leaves.

Step 1: Select the Button

Click the button on the canvas to select it.

Step 2: Switch to the Hover State

In the Right Panel, from Element State controls, choose Hover. This lets you set styles that only apply while hovering.

Step 3: Add a Transform Scale

Then, still from the Right Panel, go to Transforms and add a Scale transform. Set the value to something subtle like 1.08 on both X and Y.

Step 4: Add a Transition

Next, with the button still selected, go back to the Default state and open Transitions.

Set the type to Transform and switch to the Spring tab.

Step 5: Tune the Spring Properties

Set the Spring Transition values to the following:

• Duration – 150–350 ms is a good starting range.
• Bounce – 0.8–0.95 for a lively, elastic feel. Use sparingly.

Hover over the waveform preview to check how it feels, and adjust until it feels right.