Code
Code Component
Framer X

Make a button/card with on hover state, Method 4: react-spring

Overview

We can use react-spring and React state to implement mouse hover animations.

Key steps

1. Set state hovered on mouse over and mouse out

<div
  onMouseOver={this.setHover}
  onMouseOut={this.cancelHover}
  ...
/>

...

setHover = () => this.setState({ hovered: true });
cancelHover = () => this.setState({ hovered: false });

2. Use a Spring and set different styles according to state.hovered

<Spring
  to={{
    transform: `scale(${this.state.hovered ? 1.2 : 1})`,
    boxShadow: this.state.hovered ? hoverBoxShadow : normalBoxShadow
  }}
>
  {props => (
    <div
      style={props}
      ...
    />
  )}
</Spring>

Check out react-spring for more cool animations.

PS: If you find this tip difficult to understand, check out this course I prepared for you, where concepts are explained in a more digestible way. No programming experience required!

PPS: See other pro tips, or share / request a new tip.


download Want the complete source file? Enter your email address below:

I'll also send you new tips when available. No spam, unsubscribe any time!


© 2018 jimu Labs, Inc.