You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
767 B
JavaScript
42 lines
767 B
JavaScript
3 years ago
|
import PropTypes from 'prop-types';
|
||
|
|
|
||
|
|
// third-party
|
||
|
|
import { motion } from 'framer-motion';
|
||
|
|
|
||
|
|
// ==============================|| ANIMATION FOR CONTENT ||============================== //
|
||
|
|
|
||
|
|
const NavMotion = ({ children }) => {
|
||
|
|
const motionVariants = {
|
||
|
|
initial: {
|
||
|
|
opacity: 0,
|
||
|
|
scale: 0.99
|
||
|
|
},
|
||
|
|
in: {
|
||
|
|
opacity: 1,
|
||
|
|
scale: 1
|
||
|
|
},
|
||
|
|
out: {
|
||
|
|
opacity: 0,
|
||
|
|
scale: 1.01
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const motionTransition = {
|
||
|
|
type: 'tween',
|
||
|
|
ease: 'anticipate',
|
||
|
|
duration: 0.4
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<motion.div initial="initial" animate="in" exit="out" variants={motionVariants} transition={motionTransition}>
|
||
|
|
{children}
|
||
|
|
</motion.div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
NavMotion.propTypes = {
|
||
|
|
children: PropTypes.node
|
||
|
|
};
|
||
|
|
|
||
|
|
export default NavMotion;
|