> For the complete documentation index, see [llms.txt](https://deltaclan.gitbook.io/superform/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://deltaclan.gitbook.io/superform/global-options/animations/step-animation-duration.md).

# Step Animation Duration

## Setup

**Attribute:** `sf-step-animation-duration`

**Value:** `duration-in-milliseconds`

**Default:** `300`

**Where:** [Form Container](/superform/essentials/form-container.md)

**Description:** Defines the duration for animations between steps in milliseconds, allowing for customizable transition speeds.

**How to use:** Can work in conjunction with:

* `sf-step-animation` (see [Step Animation](/superform/global-options/animations/step-animation.md)) 
* `sf-step-animation-ease` (see [Step Animation Ease](/superform/global-options/animations/step-animation-ease.md)) 

{% hint style="info" %}

#### Pro Tip

For precise control over a step's transition duration, you can override the global animation duration. \
For example, if transitioning from step 3 to 4 includes an animation that's longer than the global setting, use `sf-next-step-delay` to set a longer duration. This fine-tunes individual transitions, providing granular control and aligning animations with specific content or actions.
{% endhint %}

**HTML Example**

{% code title="index.html" %}

```html
<!-- Form Container with Animation Settings -->
<div sf="myForm" sf-step-animation="slide-top" sf-step-animation-duration="300">
    <form>
        <!-- Step 1 -->
        <div sf-step="step1">
            <!-- Content for Step 1 -->
            <button sf-goto="next">Next</button>
        </div>

        <!-- Step 2 -->
        <div sf-step="step2">
            <!-- Content for Step 2 -->
        </div>
    </form>
</div>
```

{% endcode %}

**Webflow Example**

{% tabs %}
{% tab title="1. Element Setup" %}

<figure><img src="/files/e2dnCDZUQq0uSSIzGOfp" alt="" width="563"><figcaption><p>1.Select Form Container</p></figcaption></figure>
{% endtab %}

{% tab title="2. Attribute Setup" %}

<figure><img src="/files/H3Zs2LHedrfYpqG2Xxxw" alt="" width="563"><figcaption><p>2.Add <code>sf-step-animation-duration</code> attribute.</p></figcaption></figure>
{% endtab %}
{% endtabs %}

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2F2dD0R8NO2LpPs99H3Uxo%2FStep%20Animation%20Duration.mp4?alt=media&token=5d932877-6857-40db-a42d-ee7178659010>" %}