useMotionControls

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

Motion Instance members are helpers for you to interact with your element motion properties with ease.

Parameters

motionProperties

A Motion Properties instance.

variants

A Variants definition.

motionTransitions

A Motion Transitions instance.

Exposed

apply(variant)

Apply function will take a Variant Definition and apply it to the element without changing the current variant value.

It also accepts a variant key from variants parameter, that will be applied without changing the current variant name.

Apply is a promise that will be resolved once all the transitions resulting from the variant you passed are done.

set(variant)

Set function will take a Variant Definition and apply it to the element without changing the current variant value.

It also accepts a variant key from variants parameter, that will be applied without changing the current variant name.

It differs from apply(variant) as it will set values on target without running any transitions.

stopTransitions()

Stop Transitions function will stop all ongoing transitions on the current useMotionTransitions instance.

Example

const target = ref<HTMLElement>()

const { motionProperties } = useMotionProperties(target)

const { apply, stopTransitions } = useMotionControls(motionProperties, {
  initial: {
    y: 100,
    opacity: 0,
  },
  custom: {
    y: 0,
    opacity: 1,
  },
})

apply({
  opacity: 1,
  scale: 2,
})

setTimeout(() => {
  stopTransitions()

  console.log('Stopped after 200ms!')
}, 200)

const applyCustom = async () => {
  await apply('custom')

  console.log('Custom applied!')
}