How do you set transition animations between steps?

Support
1

I see this listed as a feature on a product update but can’t figure out how to do it in practice.

2

Hey Miles, the best way to do these would be to add some css code at the step level.

3

@eri would you be able to provide an example or create documentation around this?

I think adding a transition animation between steps could help with the issue of jittery instant loading steps (especially on mobile where hover and active states of buttons aren’t visible on autosubmit steps) and then also with some of our slower loading steps.

4

Seconding this request. Would be very helpful.

5

what’s your ideal step transition behavior?

6

Fade from right when going to next step
Fade from left when going to previous step

Example:

7

Also for autosubmit buttons, is it possible to delay the step navigation for like 500ms so that the user can see the hover/selected interaction?

Would seem a little more natural and match what others like typeform, heyflow, etc do.

8

we’re adding support for custom CSS directly in feathery soon! cc: @trebitowski

9

@peter do you know when @eri would be able to provide an example or documentation of how to implement transition animation between steps?

10

example of css that can be applied on main step containers

<style>
  div[data-feathery-id="container1"] {
    animation: fadeInRight ease 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
  }
  @keyframes fadeInRight {
     0% {
        opacity: 0;
        transform: translateX(800px);
     }
     100% {
        opacity: 1;
        transform: translateX(0);
     }
  }   
</style>

@reverson @adam