useMotion is the core composable of this package.

This composable imports every other composable and expose a motion instance.

useMotionProperties is used to make the element styling properties reactive.

useMotionTransitions is used to manage transitions scheduling and execution.

useMotionVariants is used to handle variants and variant selection.

useMotionControls is used to create motion controls from variants, properties and transitions.

useMotionFeatures is used to register lifecycle hooks bindings, visibility and events listeners.



Target must be an element (SVG / HTML), or a reference to an element.

If the target reference is updated, the current variant will be applied to the new element.


Variants must be an object or an object reference.

Keys are variants names, values are Variants Declarations.


Options is an object, supporting 4 parameters:

  1. syncVariants (boolean): Whether or not the variants will be synchronized on update.
  2. lifeCycleHooks (boolean): Whether or not the lifecycle hooks will be followed.
  3. visibilityHooks (boolean): Whether or not the visibility hooks will be applied.
  4. eventListeners (boolean): Whether or not the event listeners will be registered.

You should not be pushed to use those options, as if you are not declaring the related variants, they will not be registered anyway.



Target is a reference to the element you passed as a parameter.


Variant is a string reference, from useMotionVariants.


Variants is a reference to the variants you passed as a parameter.


State is a computed reference to the current variant applied to your element.


Spread object from Motion Controls exposed functions.


const target = ref<HTMLElement>()

const variants = ref<MotionVariants>({
  initial: {
    opacity: 0,
  enter: {
    opacity: 1,

const motionInstance = useMotion(target, variants)