Border Radius animate with duration in Framer X

ruucm
Today I Solved
Published in
1 min readDec 9, 2018

What

Some Properties including radius (border-radius) and box-shadow doesn’t animate with ‘duration’ property in Framer X

animate.easeInOut(data.noseRadius, '20px', {    duration: 3,})

(It goes to fail)

How

Return ‘style’ transition property instead of duration

export const Nose: Override = () => {    return {        radius: data.noseRadius,        shadows: data.noseBoxShadow,        style: {            transition: 'border-radius .3s ease-in-out, box-shadow 2s ease-in-out',        },    }}

--

--