# Step Animation

## Setup

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

**Options:** `fade`, `slide-top`, `slide-left`, `slide-bottom`, `slide-right`, `none` 

**Default:** `fade`

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

**Description:** Specifies the animation type to be used for transitions between steps in a multi-step form, enhancing visual appeal and flow.

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

* `sf-step-animation-duration` (see [step-animation-duration](https://deltaclan.gitbook.io/superform/global-options/animations/step-animation-duration "mention"))
* `sf-step-animation-ease` (see [step-animation-ease](https://deltaclan.gitbook.io/superform/global-options/animations/step-animation-ease "mention")) 

{% hint style="info" %}
**Enchanced Animation ⚡**\
Each animation type has a reverse animation for seamless backward navigation. For instance, `slide-top` is paired with `slide-bottom` to maintain cohesive transitions.

{% endhint %}

**HTML Example**

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

```html
<!-- Form Container with Animation Settings -->
<div sf="myForm" sf-step-animation="slide-top">
    <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%2FVmwOgWZLVmHT8dY7BLwS%2FCleanShot%202024-04-30%20at%2001.15.18%402x.png?alt=media&#x26;token=e16a648f-1ebc-424c-803b-82e6d21468da" alt="" width="563"><figcaption></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%2FQcBwz57LcUkZsl0jRpgs%2FCleanShot%202024-04-30%20at%2001.15.59%402x.png?alt=media&#x26;token=4fa450e3-fa92-4105-b216-ff5b2ee2ccea" alt="" width="563"><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Output" %}
{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2FVsyeTRvYFVK7yXe09T8k%2FCleanShot%202024-04-30%20at%2001.34.31.mp4?alt=media&token=171ef177-6694-4a8f-9c6a-63e2ff9808ee>" %}
When user navigates to next step there is a "slide-top" animation, but when user navigates back 1 step there is a reverse "slide-bottom" animation.
{% endembed %}
{% endtab %}
{% endtabs %}

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2FGp80VP744XkocIRa4ymw%2FStep%20Animation.mp4?alt=media&token=d633d519-f562-4a21-879c-efe213f70b7e>" %}
VIDEO: Adding `sf-step-animation = slide-bottom` to a Form Container.
{% endembed %}