Step Animation Ease

Control the transition easing between form steps globally.

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

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)

• sf-step-animation-duration (see Step Animation Duration)

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.

HTML Example

index.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>

Webflow Example

1. Select Element

1.Select Form Container

2. Apply Attribute

Applying sf-step-animation-ease = ease-in attribute