React spring animation example

react_spring_example.jsx

import { render } from 'react-dom'
import React, { useState } from 'react'
import { useSprings, animated } from 'react-spring'

const items = ['hey', 'yooo']

function ReactSpringExample() {
  const [pos, setPos] = useState(0)
  const springs = useSprings(items.length, items.map((item, i) => ({
    opacity: pos === i ? 1 : 0,
    config: { mass: 5, tension: 500, friction: 80 }
  })))

  const next = () => {
    setPos(pos => pos + 1)
  }

  const prew = () => {
    setPos(pos => pos - 1)
  }

  return (
    <div>
      {springs.map((props, i) =>
        <animated.div key={i} style={{
          display: props.opacity
            .interpolate(o => o === 0 ? 'none' : 'block'),
          ...props
        }}>
          {items[i]}
        </animated.div>)
      }
      <button onClick={prew}>prew</button>
      <button onClick={next}>next</button>
    </div>
  )
}

render(<ReactSpringExample />, document.getElementById('root'))