---
description: Add delay between steps for smoother transitions — global and/or granular.
---

# Step Delay Controls



Superform allows you to control the pacing of your form steps with two key attributes: `sf-global-step-delay` and `sf-next-step-delay`. These attributes add delays between step transitions to create a smoother and more polished user experience.



## Summary

↳ [#global-step-delay](#global-step-delay "mention")

↳ [#next-step-delay](#next-step-delay "mention")



***

## **Global Step Delay**

Control step delay globally.



**Attribute**: `sf-global-step-delay`

**Value**: Delay in milliseconds (e.g., `100`)

**Default:** `0` (ms)

**Where**: [form-container](../essentials/form-container "mention")

Αllows you to set a global delay (in milliseconds) between each form step transition to fine-tune the pacing of your form steps. This creates a smoother user experience by adding a slight pause between all steps, enhancing the visual flow of your form.&#x20;



#### **Use Cases**

* **Control and Synchronization**: Adjust the delay to sync with any step-specific animations, ensuring a polished and seamless flow.
* **Enhance User Experience**: By adding a slight delay, transitions between steps feel more natural and less abrupt.



#### HTML example

{% code title="index.html" %}
```html
<!-- Form Container with Global Step Delay -->
<div sf="myForm" sf-global-step-delay="100">
    <form>
        <div sf-step="step1">
            <!-- Step 1 content -->
            <button sf-goto="next">Next</button>
        </div>
        
        <div sf-step="step2">
            <!-- Step 2 content -->
            <button sf-goto="next">Next</button>
        </div>
        <!-- Additional steps -->
    </form>
</div>

```
{% endcode %}



***

## **Next Step Delay**

Granular delay controls for steps.



**Attribute**: `sf-next-step-delay`

**Value**: Delay in milliseconds (e.g., `200`)

**Default**: `0` (ms)

**Where**: [step-container](../essentials/step-container "mention")

**Description** Allows you to set a delay for the transition from the current step to the next specific step. This is useful for adding custom delays to particular steps without affecting the entire form. Can work in conjuction with [#global-delay](#global-delay "mention").



**Use Cases**

* **Custom Delays**: Use `sf-next-step-delay` for specific steps that may require longer transition times due to content complexity or animations.
* **Seamless Transitions**: Apply to steps with more complex content to ensure a smooth transition.



**HTML Example**

{% code title="index.html" %}
```html
<!-- Form Container with Specific Step Delays -->
<div sf="myForm">
    <form>
        <div sf-step="step1" sf-next-step-delay="200">
            <!-- Step 1 content -->
            <button sf-goto="next">Next</button>
        </div>
        <div sf-step="step2" sf-next-step-delay="300">
            <!-- Step 2 content -->
            <button sf-goto="next">Next</button>
        </div>
        <div sf-step="step3">
            <!-- Step 3 content -->
            <button sf-goto="next">Next</button>
        </div>
        <!-- Additional steps -->
    </form>
</div>

```
{% endcode %}



**Pro Tip** Control and synchronize delays to enhance the visual flow and user experience of your forms. By adjusting these delays, you can ensure transitions between steps feel natural, polished, and aligned with any step-specific animations.

