1

I want to animate multiple steps within a form with react-spring. This is what I have so far.

import React, { useState} from 'react';
import { animated, useSpring } from 'react-spring';

const AnimatedContainer = animated.div
function MultiStepForm() {
  const [step, setStep] = useState(1);
 
  const style = useSpring({
    to: {opacity: 1},
    from: {opacity: 0},
    config: {
        duration: 200
    }
})
  return (
    <AnimatedContainer style={style}>
      {...conditional rendering based on step state}
    </AnimatedContainer>

  )
}

I read the docs several times and I still cannot figure how to do this. I was previously using react-transition group and it was very easy with it, but for this project I have to use react-spring. I would appreciate any kind of help as I am stuck right now.

akrun
  • 874,273
  • 37
  • 540
  • 662
Gabriel
  • 23
  • 4

1 Answers1

0

I managed to do something for anyone having the same issue. Instead of using useSpring, I use useTransition.

const [step, setStep] = useStep(1); 

const transRef = useSpringRef();

useEffect(() => {
    transRef.start();
}, [step]);

const transitions = useTransition(step, {
    ref: transRef,
    keys: null,
    from: {
        ...transition styles
    },
    enter: { opacity: 1, transform: 'translateX(0px)' },
    leave: {
        ...transition styles
    },
    trail: 300, // this is delay between the leave and enter animation - enter will happen 300ms after leave in this case.
    config: { duration: 150 }
});

And then rendering the components like this

function MultiStepForm() {
  return (
  transitions((props, step) => { // props=transition styles defined in useTransition
    step === 1 && (
        <animated.div style={props}><Step1 /></animated.div> and so on.
        )
  })
)
}
Gabriel
  • 23
  • 4