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.

---

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

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.