Step Animations/Transitions

[nickcanarelli]

Step Animations/Transitions

[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 😊