CODEWITHSUNDEEP
reactjsanimationframer-motion
Sadeed_pv
Sadeed_pv

Reputation: 565

Animation made using framer motion looks too lagged in reactjs

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'}}>

Upvotes: 4

Views: 11548

Answers (1)

StormyTalent
StormyTalent

Reputation: 227

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,
      }}
    />

Upvotes: 3

Related Questions