Framer Motion duration property not affecting animation runtime

Question

I am trying to use Framer Motion to animate a square to scale up and fade in simultaneously as follows:

function App() {
  const planBoxControls = useAnimation();

  useEffect(() => {
    setTimeout(() => {
      planBoxControls.start({
        opacity: 1,
        scale: 1,
        transition: {
            delay: 0,
            duration: 100000,
            opacity: { ease: 'linear' },
            scale: { ease: 'backOut' },
        },
    });
    }, 5000);
  }, []);

  return (
    <div className="App">
      <motion.div style={{width: "500px", height: "500px", border: "5px solid red"}} initial={{ opacity: 0, scale: 0.4 }} animate={planBoxControls}></motion.div>
    </div>
  );
}

I have been trying to play around with the duration property to set it to different values, but this doesn't seem to affect how long it takes for the animation to run - it runs really fast ( < 1s) no matter what. If anybody might have a solution, I'd really appreciate the help. Thank you!

Answer 1

You have to pass the duration and delay inside transition.opacity and transition.scale as you've mentioned it.

useEffect(() => {
      setTimeout(() => {
        planBoxControls.start({
          opacity: 1,
          scale: 1,
          transition: {
              delay: 0,
              duration: 5,
              opacity: { ease: 'linear' ,duration:5},
              scale: { ease: 'backOut',duration:2 },
          },
      });
      }, 5000);

You'll get the slow effect from this code. The code you've written will also work if you remove opacity and scale from transition properties.