Animate scale react

Question

I am trying to animate the scale of my react component. It seems fairly simple and this was basically right out of the React-Motion examples:

var component = () => {
let style = { scale: spring(1.1, presets.wobbly)};
    return (
      <Motion style={style}>
              {value =>
                <div
                  style={{
                    backgroundColor: 'purple',
                    height: '50%', width: '50%', 
                    transform: `scale(${value.scale})`,
                    WebkitTransform: `scale(${value.scale})`,
                  }}>

                </div>
              }
      </Motion>
    );
}

but the component keeps disappearing or not displaying properly for a variety of reasons. How do I get this component's scale to animate properly?

A good start would be to put a snippet (jsfiddle, jsbin etc.), so that people can see clearly and eventually help... — V. Sambor, Jul 30 '18 at 20:46

Andrew Stallone · Answer 1 · 2018-07-31T14:42:25.980

You don't want to use value.scale but just value. Also to improve readability you can use scale instead of value as your parameter. Check this article for a simple example

var component = () => {
let defaultStyle = {scale: 0};
let style = { scale: spring(1.1, presets.wobbly)};
        return (
          <Motion defaultStyle={defaultStyle} style={style}>
                  {({scale}) =>
                    <div
                      style={{
                        backgroundColor: 'purple',
                        height: '50px', width: '50px', 
                        transform: `scale(${scale})`,
                        WebkitTransform: `scale(${scale})`,
                      }}>
                    </div>
                  }
          </Motion>
        );
    }

I added a default style, you need this to set the initial value of the scale. Also Added `({scale})` to pass the value properly. — Andrew Stallone, Jul 31 '18 at 14:38

Animate scale react

1 Answers1