javascript - Framer Motion - use different durations on transition properties - Stack Overflow

admin管理员组

文章数量:1277391

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 ponent). 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 ponent 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.

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 ponent). 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 ponent 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.

• javascript
• reactjs
• animation
• css-transitions
• framer-motion

Share Improve this question Follow asked Mar 16, 2022 at 18:59 amoamo 6111 gold badge11 silver badge44 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

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
    }
  },
})

本文标签： javascriptFramer Motionuse different durations on transition propertiesStack Overflow