Как использовать проценты с MotionValues ​​во Framer Motion?

Question

Используя Framer Motion useTransform Я хочу изменить ширину элемента, используя MotionValue, то есть проценты (например, 75%), а не в пикселях.

По умолчанию используются пиксели:

<motion.div className="dynamic-element" style={{ width: w }}>

Мне нужно что-то вроде следующего:

<motion.div className="dynamic-element" style={{ width:`${w}%` }}>

Что явно не работает.

Как я могу указать, что мой MotionValue является процентным, а не пиксельным?

В качестве альтернативы я могу использовать filter: scale(), но это приводит к размытию содержимого (и да, я искал, как это исправить, но безуспешно).

Answer 1

Сделать это можно так:

useTransform(w, (value) => `${value}%`);

Answer 2

Можете ли вы использовать варианты?

Например:

<motion.div
  variants={{
    a: {width: '20%'},
    b: {width: '50%'}
  }}
  animate={variant}
/>

См. Это Демонстрация CodeSandbox .