How do I write a React Spring to change margin?

Question

I tried writing a simple react spring to change my component's margin but it isn't working, the div just render with the "from" style.

const gradients = useSpring({
        from: {
            marginTop: '0'
        },
        to: {
            marginTop: '-100vh'
        }
    })

    return (
        <animated.div style={gradients}>{some content}</animated.div>
    )

Answer 1

took me hours: you have to set the units of measurement on the from property even though it's zero!