# Step Animation Ease

## Setup

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

**Value:** `ease-type`

**Default:** `ease-in`

**Options:** `linear`, `ease`, `ease-in`, `ease-out`, `ease-in-out`, `cubic-bezier(n,n,n,n)`

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

**Description:** Defines the easing function for step transitions, providing smoother and more controlled animations.

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

{% hint style="info" %}
**Pro Tip**

Custom cubic-bezier curves are supported, allowing for unique transition profiles.

For instance, a cubic-bezier curve like `cubic-bezier(0.42, 0, 0.58, 1)` offers a balanced easing effect between steps.

{% endhint %}

**HTML Example**

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

```html
<!-- Form Container with Animation Settings -->
<div sf="myForm" sf-step-animation="slide-top" sf-step-animation-duration="300" sf-step-animation-ease="ease-in-out">
    <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. Select Element" %}

<figure><img src="https://450000313-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2FLfA4T7yqYurDr3YnI64k%2FCleanShot%202024-05-01%20at%2015.39.43%402x.png?alt=media&#x26;token=76786534-49b5-4a72-88f0-9c179b8d1c92" alt="" width="563"><figcaption><p>1.Select Form Container</p></figcaption></figure>
{% endtab %}

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

<figure><img src="https://450000313-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2FeeGYDeIu6Tfkh7K5jndt%2FCleanShot%202024-05-01%20at%2015.40.51%402x.png?alt=media&#x26;token=33a2ba38-f6b6-452b-9b7b-4759fcbaea84" alt="" width="563"><figcaption><p>Applying <code>sf-step-animation-ease = ease-in</code> attribute</p></figcaption></figure>
{% endtab %}
{% endtabs %}

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDGLtnaQr6bP3qHCWvX0r%2Fuploads%2FRUemnAppHTdgzd4YKWYd%2FStep%20Animation%20Ease.mp4?alt=media&token=fe26a91c-a43d-48f1-bf30-b2142ec05d40>" %}