Step Animation Duration

Control the transition duration between form steps globally.

Setup

Attribute: sf-step-animation-duration

Value: duration-in-milliseconds

Default: 300

Where: Form Container

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)

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

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.

HTML Example

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

Webflow Example

1. Element Setup

1.Select Form Container

2. Attribute Setup

2.Add sf-step-animation-duration attribute.