Framer Motion - use different durations on transition properties

Question

I am using Framer Motion in React to animate a circular progress bar. I have managed to get the actual circle to animate based on a a dynamic duration (that gets passed from a parent component). The issue is that I need to the opacity to immediately be set to 1, while the rest of the animation would be based on the duration of the prop being passed down. Something like this in css: transition: opacity 0s, {motionproperty} {duration} where the last two are the motion property pathLength and the dynamic duration.

Currently this is what my ProgressCircle component and the Framer Motion animate variants look as follows:

const MotionProgressCircle = styled(motion.circle)``;

const progressCircleVariants = {
  initial: {
    pathLength: 0,
    strokeWidth: 3,
    opacity: 0,
    r: initRadius,
    transition: {
      duration: '500',
      strokeDashoffset: 0
    }
  },
  hover: {
    strokeWidth: 5,
    r: hoverRadius
  },
  playing: (duration) => ({
    pathLength: 1,
    transition: {
      type: "tween",
      duration: duration
     },
    opacity: 1,

  })
};

const ProgressCircle = ({ duration }) => {
  return (
    <div>
      <StyledContainer >
        
        <MotionProgressCircle
      
          variants={progressCircleVariants}
          initial="initial"
          animate="playing"
          custom={duration}
          whileHover="hover"
          fill="transparent"
          stroke="currentColor"
          cx="1em"
          cy="1em"
          strokeLinecap="round"
        />
      </StyledContainer>
    </div>
  );
};

I have tried just interpolating the different values of the transition property, but this did not work.

Answer 1

You can list the transition setting for individual properties by adding them to the transition object:

playing: (duration) => ({
  pathLength: 1,
  opacity: 1,
  transition: {
    type: "tween",
    duration: duration, // default duration for this transition
    opacity: {
      duration: 0 // custom duration for opacity property only
    }
  },
})