as
Description
The HTML element to render.
Type
keyof ReactDOMScaleFade
ScaleFade is a component that gradually scales up to reveal or scales down to hide an element.
Props
ScaleFadeProps
colorScheme
Description
The visual color appearance of the component.
Type
"blackAlpha" | "whiteAlpha" | "amber" | "blue" | "info" | "link" | "primary" | "cyan" | "emerald" | "flashy" | "fuchsia" | "gray" | "green" | "success" | "indigo" | "lime" | "neutral" | "orange" | "warning" | "pink" | "purple" | "red" | "danger" | "rose" | "sky" | "teal" | "violet" | "secondary" | "yellow"delay
Description
Custom delay definition for enter and exit.
Type
number | MotionLifecycleProps<number>duration
Description
Custom duration definition for enter and exit.
Type
number | MotionLifecycleProps<number>enter
Description
Custom enter.
Type
anyexit
Description
Custom exit.
A target to animate to when this component is removed from the tree.
This component **must** be the first animatable child of an AnimatePresence to enable this exit animation.
This limitation exists because React doesn't allow components to defer unmounting until after
an animation is complete. Once this limitation is fixed, the AnimatePresence component will be unnecessary.
``jsx
import { AnimatePresence, motion } from 'framer-motion'
export const MyComponent = ({ isVisible }) => {
return (
<AnimatePresence>
{isVisible && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
/>
)}
</AnimatePresence>
)
}
``
Type
anyinitial
Description
Custom initial.
Properties, variant label or array of variant labels to start in.
Set to false to initialise with the values in animate (disabling the mount animation)
``jsx
// As values
<motion.div initial={{ opacity: 1 }} />
// As variant
<motion.div initial="visible" variants={variants} />
// Multiple variants
<motion.div initial={["visible", "active"]} variants={variants} />
// As false (disable mount animation)
<motion.div initial={false} animate={{ opacity: 0 }} />
``
Type
anyisOpen
DeprecatedDescription
Show the component. triggers when enter or exit states.
Deprecated
Use open instead.
Type
booleanopen
Description
Show the component. triggers when enter or exit states.
Type
booleanreverse
Description
If true, the element will transition back to exit state.
Type
booleanDefault
truescale
Description
The initial scale of the element.
Type
numberDefault
0.95size
Description
The size of the ScaleFade.
Type
stringtransition
Description
Custom transition definition for enter and exit.
Type
MotionLifecycleProps<Transition$1>transitionEnd
Description
Custom transitionEnd definition for enter and exit.
Type
MotionLifecycleProps<MakeCustomValueType<TargetProperties>>unmountOnExit
Description
If true, the element will unmount when isOpen={false} and animation is done.
Type
booleanvariant
Description
The variant of the ScaleFade.
Type
stringEdit this page on GitHub