Superform by Delta Clan
✨ ClonablesSocialResourcesSuperform Home
v2
v2
  • 🏁Getting Started
    • Introduction
    • Quick Start
  • 🫀Essentials
    • Form Container
    • Step Container
    • Navigation - Overview
      • Direct
      • Logic / Conditional
      • Hook
    • Variables
      • Form Data ($f)
      • Step Index ($s)
      • Progress Percentage ($p)
      • Scoring Variables ($v)
    • Progress Bar
    • Reset
    • Radio Groups
    • Checkbox Groups
    • Cheatsheet
  • ⚙️Global Options
    • Step Delay Controls
    • Animations
      • Step Animation
      • Step Animation Duration
      • Step Animation Ease
    • Save Data & Progress
    • Pre-fill Form
    • Prevent Content Flash
    • Debug
    • Third-party Integrations
    • Cheatsheet
  • 🎛️Input Validation & Errors
    • Validation
      • length()
      • words()
      • minmax()
      • checkbox()
      • must()
      • hook()
    • Error Management
      • Automatic Error Setup
      • Manual Error Setup
  • ⚡Reactivity
    • Update Text
    • Visibility
    • Class Toggle
    • Value
    • Set Attribute
  • 🔢Score Tracking
    • Score Setup & Calculation
    • Score Ranking
  • ⌨️Accessibility
    • Enter & Backspace Bindings (↩, ⌫)
    • Checkbox & Radio Bindings
  • 🛠️Javascript SDK
    • Intro to Superform API
    • Superform Instance
    • Cheatsheet
  • 📖Additional Resources
    • WTF is an expression ? 🆕
    • Integrations
    • Tutorials
    • Changelog
    • FAQ 🚧
    • Join Discord
Powered by GitBook
On this page

Was this helpful?

  1. Global Options
  2. Animations

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

Last updated 9 months ago

Was this helpful?

⚙️
1.Select Form Container
Applying sf-step-animation-ease = ease-in attribute