Step Animation

Control the transition style between form steps.

Setup

Attribute: sf-step-animation

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

Default: fade

Where: Form Container

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)

• sf-step-animation-ease (see Step Animation Ease)

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.

HTML Example

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

Webflow Example

1. Element Setup

2. Attribute Setup

Output

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.

VIDEO: Adding sf-step-animation = slide-bottom to a Form Container.