title: Framer motion Follow same duration on hover end
body: <p>I have an animation that scales the div on hover with duration of <code>2</code> which is working correctly. I want same duration to be followed when the mouse leaves the div. Currently the div shrinks instantly to original size.</p>
  <pre><code>import &quot;./styles.css&quot;;
  import { motion } from &quot;framer-motion&quot;;
  
  const variants = {
    hover: { scale: 2, transition: { duration: 2 } }
  };
  export default function App() {
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;motion.div
          variants={variants}
          whileHover=&quot;hover&quot;
          className=&quot;card&quot;
        &gt;&lt;/motion.div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>There is a <code>onHoverEnd</code> prop but it is a function instead. Do I have to manually start another animation in that function?</p>
  <p><a href="https://codesandbox.io/s/quizzical-boyd-33v72" rel="nofollow noreferrer">Codesandbox link</a></p>