Code Component
Framer X

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


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



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

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

    transform: `scale(${this.state.hovered ? 1.2 : 1})`,
    boxShadow: this.state.hovered ? hoverBoxShadow : normalBoxShadow
  {props => (

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!

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!

© 2021 jimu Labs, Inc.