Prevent delay when hover ends when there is delay present in animate prop.

[Nisan-Shrestha]

Im trying to do as follow:

at initial scale is 0
animate scale is 1.25 with delay of 2 second
onHover scale is 5 but with no delay
onhover end the scale should go back to 1.25 or 1 without delay

I tried this but there is 2 second delay when hover ends before scale down animation begins.
I looked aorund and this method works for framer-motion 2.1.4 but not since motion 3.0

how do i solve this?
the sample code is:

import React from "react";
import { motion } from "framer-motion";
import "./styles.css";

const size = 200;
const radius = 40;
const color = "#0CF";

export default function App() {
  const variants = {
    start:{scale:0},
    active: { scale: 1.25, transition: { delay: 2 } },
    hovering: {
      scale: 5,
      transition: { delay: 0 },
    },
  };

  return (
    <div className="App">
      <motion.div
        style={{
          width: size,
          height: size,
          backgroundColor: color,
          borderRadius: radius,
        }}
        variants={variants}
        initial="start"
        animate={"active"}
        whileHover={"hovering"}
        transition={{}}
      />
    </div>
  );
}

[Qwilliams815]

Hey there,

I ran into this problem as well, and while I never found a legitimate fix I did find a simple workaround using framer-motion's onAnimationComplete callback.

The idea is to store your delay value in state and update it after the initial animation is complete.

Here is your code with the implemented changes and a codesandbox demo running framer-motion ^3.30:

import React, { useState } from "react";
import { motion } from "framer-motion";
import "./styles.css";

const size = 200;
const radius = 40;
const color = "#0CF";

export default function App() {
  const [delay, setDelay] = useState(2); // Initial value

  const variants = {
    start: { scale: 0 },
    active: { scale: 1.25, transition: { delay: delay } },
    hovering: {
      scale: 5,
      transition: { delay: delay },
    },
  };

  return (
    <div className="App">
      <motion.div
        style={{
          width: size,
          height: size,
          backgroundColor: color,
          borderRadius: radius,
        }}
        variants={variants}
        initial="start"
        animate={"active"}
        whileHover={"hovering"}
        transition={{}}
        onAnimationComplete={() => setDelay(0)} // Subsequent value
      />
    </div>
  );
}