AnimatedButton.js

import React from "react"
import styled from "styled-components"
import { animated } from 'react-spring'

const AnimatedButton = ({ toggleModal, hostRef, deal, pictureRef, style, src }) => (
  <AnimateButtonStyling
    innerRef={hostRef}
    pictureRef={pictureRef}
    style={style}
    onClick={() => toggleModal()}>
    <Img src={src} />
  </AnimateButtonStyling>
)

const AnimateButtonStyling = styled(animated.button)`
  margin: 0;
  padding: 0;
  outline: none;
  background: transparent;
  border: none;
  position: fixed;
  overflow: hidden;
  top: calc(85vh - 50px);
  left: 25px;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  z-index: 3;
  will-change: top, left, transform, border-radius;
`

const Img = styled.img`
  height: 100%;
  width: 100%;
  object-fit: fill;
`

export default AnimatedButton

react-spring.js

import React from 'react'
import { Spring, config } from 'react-spring'
import AnimatedButton from './AnimatedButton'

const Animation = props => {
  const { top, left, width, height } = props.pictureRef.current.getBoundingClientRect()
  return (
    <Spring
      native
      config={config.wobbly}
      from={{ opacity: 1 }}
      to={{
        borderRadius: props.isOpen ? `0%` : `50%`,
        top: props.isOpen ? top : window.innerHeight - 130,
        left: props.isOpen ? left : 25,
        transform: `scale(${props.isOpen ? width / 100 : 1}, ${props.isOpen ? height / 100 : 1})`
      }}>
      {styles => <AnimatedButton {...props} style={styles} />}
    </Spring>
  )
}

export default Animation