# 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>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://deltaclan.gitbook.io/superform/global-options/animations/step-animation-duration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.