Animation made using framer motion looks too lagged in reactjs-CodePudding

Here is the website link and as you can see, the intro animations look too laggy. Here is the code:

<motion.div className='pic' initial={{x:window.innerWidth < 996?'0%':'100%'}} animate={{x:'0%'}} transition={{delay:'1.6', type:'spring'}}><img src={blob} alt='hero section image'></img></motion.div>

Even the animations after the hero section don't look nice. I have used the react-intersection-observer to activate the animation on scrolling in this particular code.

 <motion.div className='detailed' ref={refdetail} initial={{x:'100%', opacity:'0%'}} animate={{x: inViewdetail? '0%': '100%', opacity:inViewdetail? '100%': '0%'}} transition={{ delay:'1.5'}}>

CodePudding user response：

Recently I have worked with framer.motion and it worked well out in my side.
I think that problem is related to the delay sub-prop you used in transition prop.

Here is my tested codebase with motion.framer which works fine in my side.

    <motion.div
      key={"setuplayout_motion"}
      exit={{ opacity: 0 }}
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
    >
      <SetupLayout setCurrentStep={setCurrentStep} />
    </motion.div>


    <motion.div
      animate={{
        x: authType === "sign-in" ? "10px" : "70px",
      }}
      transition={{
        x: { type: "spring", stiffness: 100 },
             duration: 0.8,
            delay: 0.2,
      }}
    />