AnimatedOverflow.js

class AnimatedOverflow extends React.Component {
  render() {
    const { children } = this.props
    return (
      <span
        onMouseOver={({ target: node }) => {
          const scrollDelta = node.offsetWidth - node.scrollWidth
          if (scrollDelta < 0) {
            const duration = 2000 * (node.scrollWidth / node.offsetWidth)
            this.animation = node.animate(
              [{ textIndent: '0px' }, { textIndent: `${scrollDelta}px` }],
              {
                delay: 100,
                endDelay: 100,
                duration,
                fill: 'forwards',
                easing: 'ease-in-out',
              }
            )
          }
        }}
        onMouseOut={() => {
          if (this.animation) {
            this.animation.playbackRate *= 3
            this.animation.reverse()
          }
        }}
      >
        {children}
      </span>
    )
  }
}