Animated button with React Spring

Question

I am coming from a React-pose background and like to try React-spring. I have a really simple case which I'd like to transfer to be used with React-spring.

I have the case written in a Codesanbox using React-pose, https://codesandbox.io/s/4wxzm60nk9

I've tried converting this myself, but I just end up confusing myself. Especially now when trying to do it with their hooks API. All help that I can get is super appriciated.

Thank you.

Peter Ambruzs · Accepted Answer · 2019-03-13T08:25:23.790

4

I just made an animated button yesterday, so I refactored it to change its size.

import React, {useState} from "react";
import { Spring, animated as a } from 'react-spring/renderprops';

const SpringButton = () => {
  const [pressed, setPressed] = useState(false);
  return (
  <Spring native from={{scale: 1}} to={{scale: pressed? 0.8 : 1}}>
    {({scale}) => (
      <a.button 
        style={{
          backgroundColor: 'red', 
          height: '100px', 
          width: '100px', 
          color: 'rgb(255, 255, 255)',
          transform: scale.interpolate(scale => `scale(${scale})`)
          }}
        onMouseDown={() => setPressed(true)}
        onClick={() => setPressed(false)}
        onMouseLeave={() => setPressed(false)}
      >
        Click me
      </a.button>
    )}
  </Spring>
  );
}

Its not the hook interface yet, but I think it helps you to understand how it works. I t also uses the quicker native rendering. The event handling a bit different from react-pose. And you can tweek the config as well if you want the animation really springy.

import {config} from 'react-spring/renderprops';
<Spring config={config.wobbly} ...>

https://codesandbox.io/s/7zlrkv4kjj

edited Mar 13 '19 at 08:25

answered Mar 13 '19 at 08:14

Peter Ambruzs

7,763
3
30
36

1

Wooow! Thanks a lot Peter! Will try to make it a hook later. I also noticed one thing, when you press and hold over a posed animated button and drag the mouse away from the button, it remains "clicked", meanwhile if you do the same with the react-spring button it will go back to its original form. Do you think it has to do with how the two libs are built? Thanks again for the answer. Now I can remove react-pose from my project haha – Martin Nordström Mar 13 '19 at 08:27
It is how I solved the event handling. Pose handles the mouse up event outside the button. I do not want to fiddle with it, so I used the mouseLeave event to reset to the original state. With react-spring all the event handling is depend on your implementation. – Peter Ambruzs Mar 13 '19 at 08:32
I understand. Well, for my use-case it wont matter, but it would be interesting to see how they're handling it. Thanks again – Martin Nordström Mar 13 '19 at 08:35

score 4 · Answer 2 · answered Mar 13 '19 at 11:19

Something like this probably: https://codesandbox.io/s/pyvo8mn5x0

function App() {
  const [clicked, set] = useState(false)
  const { scale } = useSpring({ scale: clicked ? 0.8 : 1 })
  return (
    <div className="App">
      <animated.button
        onMouseDown={() => set(true)}
        onMouseUp={() => set(false)}
        style={{
          backgroundColor: 'red',
          height: '100px',
          width: '100px',
          color: '#FFF',
          transform: scale.interpolate(s => `scale(${s})`)
        }}
        children="Click me"
      />
    </div>
  )
}

You could also interpolate up-front if you like:

const props = useSpring({ transform: `scale(${clicked ? 0.8 : 1})` })
return <animated.button style={props} />

Unlike pose react-spring does not include gesture stuff, it choses to interface with 3rd party libs for that. For instance: https://github.com/react-spring/react-with-gesture

Animated button with React Spring

2 Answers2