attrEffect

attrEffect applies the output of motion values to the attributes of one or more elements.

When these motion values update, the element will re-render once per frame during the render step of the frameloop.

const width = motionValue(100)

attrEffect("rect", { width })

attrEffect will automatically handle casing for aria and data attributes, converting camel case to kebab case.

const value = motionValue("#fff")

attrEffect(counter, {
  ariaValuenow: value,
  dataValue: value
})

// <div aria-valuenow="#fff" data-value="#fff">

It will also dynamically set attributes via their JavaScript setter, if available, for improved type-safety and performance.