# Step Animation Duration

## Setup

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

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

**Default:** `300`

**Where:** [form-container](https://deltaclan.gitbook.io/superform/essentials/form-container "mention")

**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](https://deltaclan.gitbook.io/superform/global-options/animations/step-animation "mention")) 
* `sf-step-animation-ease` (see [step-animation-ease](https://deltaclan.gitbook.io/superform/global-options/animations/step-animation-ease "mention")) 

{% 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="https://450000313-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2FlOPOdPEXSce32fPiIJ2Y%2FCleanShot%202024-05-01%20at%2014.27.51%402x.png?alt=media&#x26;token=ce71bb26-30af-4eb5-a7e7-340480fe404c" alt="" width="563"><figcaption><p>1.Select Form Container</p></figcaption></figure>
{% endtab %}

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

<figure><img src="https://450000313-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2FMK2pyGpjl13sTrvX8tDv%2FCleanShot%202024-05-01%20at%2014.29.34%402x.png?alt=media&#x26;token=cf79a1ed-7683-4d6d-a2f2-b1b7be5da891" 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>" %}