useElementTransform

useElementTransform is used to sync a reactive object to a target element CSS transform.

It uses reactiveTransform and binds it to a target.

Parameters

target

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

If the target reference is updated, the current transform will be updated from the new element styling.

Exposed

transform

Transform is the current target Transform Properties as a reactive object.

When you change a value, it will update the element transform property accordingly.

stop()

Stop function will stop the watcher that syncs the element transform with the reactive object.

Example

const target = ref<HTMLElement>()

const { transform, stop } = useElementTransform(target)

transform.scale = 1.2