Step Animations
Step Animations add smooth transitions between the steps of a multi-step form, so moving forward and back feels polished instead of abrupt.
What this does
Instead of steps snapping in and out, they transition with a subtle animation, giving your form a modern, app‑like feel.
Why it exists: small motion cues make multi‑step forms feel smoother and more premium, which helps engagement.
Typical use cases
- Onboarding and application flows.
- Product finders and quizzes.
- Any multi‑step form where polish matters.
How to use it
- Enable Step Animation on FormFlow → Features (Conversion UX group).
- In Elementor, open your form and go to Content → Form Fields. Under Required Mark you will find Step Transition and, once a transition is chosen, Transition Duration.
- Preview and move between steps to see the transition.
The controls only appear once the form actually contains a Step field — there is nothing to transition between without one.
Available transitions: Fade, Slide Left, Slide Right, Slide Up, Zoom. Slide Left and Slide Right reverse themselves when the visitor goes back, so the motion always follows the direction of travel.
Visitors who have asked their system for reduced motion get the step change with no animation.
Tips & Best Practices
-
Keep it subtle. Gentle, quick transitions feel professional; heavy effects distract.
-
Match your brand’s pace. Fast, crisp motion suits most business forms.
-
Pair with auto next step for a seamless, flowing experience.
-
Don’t stack it on Swipe Navigation. Swipe brings its own slide and takes over; the Step Animation is skipped on those forms.
-
Test on lower‑end devices to ensure transitions stay smooth.
Frequently Asked Questions
Are step animations free?
No — it’s a Pro feature.
Can I choose the animation style?
Yes — Content → Form Fields → Step Transition, under Required Mark.
Can I give each step its own animation?
No. One transition applies to the whole form, which keeps a multi‑step form consistent and is far quicker to set up.
I use Swipe Navigation as well — which one wins?
Swipe Navigation. When it is on for a form it owns the step transition, and the Step Animation is skipped rather than played on top of the slide.
Do animations slow the form down?
Well‑tuned, subtle transitions have negligible impact; keep them short.
Do they work both forward and back?
Yes — transitions apply as users move between steps.
Are they mobile‑friendly?
Yes — they enhance the feel on touch devices too.
Can I turn them off later?
Yes — disable the feature on the Features tab anytime.
Was this article helpful?
Something missing or unclear? Tell the @Rank support team and we will fix the page.
For product help beyond the documentation, visit at-rank.com.