
Framer Motion Animation for my new project
- Used framer motion for animating the content inside card with opacity , blur and y animation
variants={{
initial: { opacity: 0, filter: "blur(4px)", y: 8 },
animate: {
opacity: 1,
filter: "blur(0px)",
y: 0,
transition: {
duration: 0.42,
ease: [0.165, 0.84, 0.44, 1],
},
},
exit: {
opacity: 0,
filter: "blur(4px)",
y: -4,
transition: {
duration: 0.15,
ease: [0.55, 0, 1, 0.45],
},
},
}}
initial="initial"
animate="animate"
exit="exit"
- used https://ui.bklit.com/docs for chart library. It has beautiful components of chart for ready to use.