<MagicMotion />
Overview
- This component is the main component of the library.
- All children of this component will have their layout changes automatically animated.
An example of this component can be seen on the To Do List example.
⚠️
All children of the <MagicMotion /> component will have their css
transform property overriden. To exclude a child from being animated, you
can add key="exclude" to it.
Props
interface MagicMotionProps {
children: JSX.Element;
transition?: Transition;
layoutDependency?: unknown;
disabled?: boolean;
}| Prop name | Default value | Description |
|---|---|---|
transition (opens in a new tab) | set by framer-motion | The transition animation for the card. |
layoutDependency | undefined | A value that is used to optimize when a layout animation should occur. In the To Do list example this value could be set to the todos state |
disabled | false | If true, the animation will be disabled |