Search code examples
cssreactjsjsxreact-motion

React Motion CSS transform from center

I am using react-motion for CSS transfrom in react. this bellow code scales my desired output from top left corner.

<Motion defaultStyle={{ x: 0 }} style={{ x: spring(360) }}>
    {(value) => {
        return (
            <div
                style={{
                    width: value.x,
                    height: value.x,
                    animation: `scale 5s infinite`,
                    transform: `scale(1,1)`,
                }}
            >
                {" "}
                <this.ComponentName post={post} view={view} />
            </div>
        );
    }}
</Motion>

How can i make it scale from center?

Solution

  • I have come to a solution. It can be done with a few changes but a tricky one. 

    <Motion defaultStyle={{ x: 0 }} style={{ x: spring(1) }} >
{value => {return <div style={{
  animation: `scale 5s infinite`,
  transform: `scale(${value.x})`,
}}
> <this.ComponentName post={post} view={view}/></div>}}