CODEWITHSUNDEEP
javascriptreactjsanimationreact-motion
Ryan Cocuzzo
Ryan Cocuzzo

Reputation: 3219

Animate scale react

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?

Upvotes: 0

Views: 248

Answers (1)

Andrew Stallone
Andrew Stallone

Reputation: 51

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>
        );
    }

Upvotes: 0

Related Questions