Step Animations/Transitions

[nickcanarelli]

Is your feature request related to a problem? Please describe. This isn't really related to a problem, curious if there is any plan in the roadmap to implement the ability to add transitions of some sort? I am currently trying to implement Framer Motion to animate the transition between steps and it appears its not possible without some changes to Formiz.

Describe the solution you'd like After looking through the docs and messing with code, you can only pass a string in the as prop on the formizStep component. I've tried passing a component to the as prop to no avail. It would be nice to be able to do something like the following to accomplish this:

<FormizStep
     name={step.cardTitle}
     isEnabled={checkStepConditional(step)}
     as={
         <motion.div
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
         />
     }
>
...

[ivan-dalmet]

Hello @nickcanarelli

Did you tried to create a component that you pass to the as?

const MotionDiv = (props) => {
  return <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} {...props} />

...

<Formiz Step 
  name={step.cardTitle}
  isEnabled={checkStepConditional(step)} 
  as={MotionDiv} >
... 

I'm on my phone so I can't test it right now but the as property should accept a component (not jsx but a component) because this is working for React Native.

(also did you add an animated presence that is wrapping the steps? I'm not a framer motion pro but I think you need it)

I don't know if the animation will work. If not may be I can and a patch to make it work. Anyway I'm currently working on the v2. I will add this to the use cases to check 😊