Framer-motion animation that lags/freezes just on Edge

Viewed 421

I have a very weird issue. I am doing a basic animation like (with framer-motion 5.5.5 and tailwindcss 2.2.16):

<motion.div 
    className="w-2/3 h-96 bg-red-500 absolute left-10 top-10" 
    
    initial={{ x: 2700 }} 
    animate={{ x: 0 }}

    transition={{
      type: "spring",
      stiffness: 80,
      delay: 0.6,
      damping: 15,
    }}
></motion.div>

The problem with this animation is that on Edge it lags/freezes a tiny amount in the ending. On any other browser like Chrome and Firefox, the animation is very smooth. The weird part is that if I am using the Edge Incognito mode (InPrivate) the animation is smooth without any lag or freeze.

I have to specify that I am returning the above element in index.js so nothing else it's interfering.

My node version is v16.13.1 and my npm version is 8.1.2.

0 Answers
Related