<MagicMotion />

<MagicMotion />


  • 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.


interface MagicMotionProps {
  children: JSX.Element;
  transition?: Transition;
  layoutDependency?: unknown;
  disabled?: boolean;
Prop nameDefault valueDescription
transition (opens in a new tab)set by framer-motionThe transition animation for the card.
layoutDependencyundefinedA 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
disabledfalseIf true, the animation will be disabled