search
Superform Home

Animations

Custom-built animation system — an overview.

Superform's built-in animation system features CSS animations for both advancing and reversing through form steps. This dual-direction capability ensures smooth, consistent transitions throughout your form.

hashtag
Customization Options

  • Step Animations:

    • Attribute: sf-step-animation

    • Values: fade, slide-top, slide-bottom, slide-left, slide-right, none

    • Description: Controls the transition style between form steps.

    → See more details: Step Animation

  • Animation Duration:

    • Attribute: sf-step-animation-duration

    • Values: Time in milliseconds (e.g., 300)

    • Description: Sets the duration for step transitions.

    → See more details: Step Animation Duration

  • Animation Ease:

    • Attribute: sf-step-animation-ease

    • Values: linear, ease, ease-in, ease-out, ease-in-out, or custom cubic-bezier values

    • Description: Defines the easing function for animations.

    → See more details: Step Animation Ease

circle-info

Pro Tips

  • Syncing Animations: Use CSS transitions to synchronize (other) animations with form step transitions. This creates a cohesive visual experience.

  • Custom Easing: Experiment with custom cubic-bezier values for unique easing effects. These can be fine-tuned to match your design aesthetics.

  • Preset Animations: Take advantage of preset animations that include reverse animations for a seamless backward navigation experience.

Last updated