MountTransition

This component extends motion.div component of framer-motion. It provides one additional prop: animationType.

Use this prop to do basic animations:

• fade (default)
• scale
• slide up
• slide down
• slide left
• slide right

All other motion.div props are present, but some have default values. See below.

Example

import { AnimatePresence } from 'framer-motion';

import { MountTransition } from 'la-danze-ui';

function App({ isVisible }) {

return (

<AnimatePresence>

{isVisible && (

<MountTransition

animationType="slideLeft"

/>

)}

</AnimatePresence>

);

}

Props

Extends motion.div props

Additional props:

Name	Type	Default	Required	Description
animationType	'fade' |'scale' |'slideUp' |'slideDown' |'slideLeft' |'slideRight'	'fade'	No	Animation type of the div. Overrides variants prop.

Original motion.div props default values:

Name	Type	Default	Required	Description
initial	Target |VariantLabels |boolean	'initial'	No	See framer-motion doc.
animate	AnimationControls |TargetAndTransition |VariantLabels |boolean	'in'	No	See framer-motion doc.
exit	TargetAndTransition | VariantLabels	'out'	No	See framer-motion doc.
transition	Transition	{ duration: 0.225 }	No	See framer-motion doc.
variants	Variants		No	See framer-motion doc.
style	MotionStyle		No	See framer-motion doc. Overridden by animationType prop.