The Spring timing function in Droip 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.

When applying a spring transition, you only need to adjust two properties:

• Duration (Time): Controls how long the animation takes to complete. Short duration means fast and snappy. Long duration means slow and smooth.
  
• Bounce: Defines how much the element overshoots and oscillates before settling.
  Low values mean subtle bounce. High values mean playful, elastic bounce.

You can find the Spring timing function in Transitions and Interactions.

Example: Scale a button on hover with a spring transition 

When users hover the button, it will scale up with a springy motion and settle 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 element state controls (Neutral / Hover / Focused), choose Hover. This lets you set styles that only apply while hovering.)

Step 3: Add the transform scale: 

In the right-side style panel, find Transforms > Scale. Add a scale transform and set the value to something subtle: 1.08 on both X and Y.

Step 4: Add the transition for the transform: 

With the button still selected, open Transitions in the Effects area and select Transform. Click the Timing dropdown for your Transform transition and choose Custom. Then switch the curve/type to Spring.

Step 5: Tune spring parameters:

• Duration: 150–350 ms is a good starting window.
• Bounce: 0.8–0.95 to make it lively, bouncy (use sparingly)

Preview and customize the value until it feels right.