Relative Content

Tag Archive for reactjsnext.jsframer-motion

i have a div which dynamically displays data one at a time. when i use exit function of framer motion it shows all the data instead of one at a time

<AnimatePresence> <motion.div key={slide} exit={{opacity: 0}}initial={{opacity:0}} animate={{opacity: 1}} transition={{duration:2}} className=””> <p className=”text-start text-grey text-wrap py-3″> {data[slide].comment} </p> <p className=”text-start text-grey text-wrap pb-10″> {data[slide].name} </p> </motion.div> </AnimatePresence> i am loading data dynamically , when i add the ‘exit’ feature of framer motion all the data is rendered and the all of them start to animate, overflowing the […]

Framer animations in nextjs inview always true

I am trying to use Framer.com react in NextJS both latest versions.
When I use the isInView hook, it’s triggered when scrolling from bottom and up, but not from top and down. From top to down, it’s always true (I guess it shouldnt be? because the header element is visible and not the SlideInEffect component).