TouchRippleButton.js

import React, { Component } from 'react';
import {TransitionMotion, spring, utils} from 'react-motion';

export default class Demo extends Component {
  constructor() {
		super()
		this.state = {mouse: [], now: 't' + 0}
	}

  handleMouseMove({pageX, pageY}) {
    // Make sure the state is queued and not batched.
    this.setState(() => {
      return {
        mouse: [pageX - 25, pageY - 25],
        now: 't' + Date.now(),
      };
    });
  }

  handleTouchMove(e) {
    e.preventDefault();
    this.handleMouseMove(e.touches[0]);
  }

  willLeave(key, valOfKey) {
    return {
      ...valOfKey,
      opacity: spring(0, [60, 15]),
      scale: spring(2, [60, 15]),
    };
  }

  render() {
    const {mouse: [mouseX, mouseY], now} = this.state;
    const styles = mouseX == null ? {} : {
      [now]: {
        opacity: spring(1),
        scale: spring(0),
        x: spring(mouseX),
        y: spring(mouseY),
      },
    };
    console.log(styles)
    return (
      <TransitionMotion willLeave={::this.willLeave} styles={styles}>
        {circles =>
          <div
            onClick={::this.handleMouseMove}
            onTouchMove={this.handleTouchMove}
            className="demo7">
            {Object.keys(circles).reverse().map(key => {
              const {opacity, scale, x, y} = circles[key];
              return (
                <div
                  key={key}
                  className="demo7-ball"
                  style={{
                    opacity: opacity,
                    scale: scale,
                    transform: `translate3d(${x}px, ${y}px, 0) scale(${scale})`,
                    WebkitTransform: `translate3d(${x}px, ${y}px, 0) scale(${scale})`,
                  }} />
              );
            })}
          </div>
        }
      </TransitionMotion>
    );
  }
}

import React, { Component } from 'react';
import {TransitionMotion, spring, utils} from 'react-motion';

export default class Demo extends Component {
  constructor() {
    super()
    this.state = {mouse: [], now: 't' + 0}
  }

  handleMouseDown({pageX, pageY}) {
    // Make sure the state is queued and not batched.
    this.setState(() => {
      return {
        mouse: [pageX - 25, pageY - 25],
        now: 't' + Date.now(),
      };
    });
  }

  handleMouseUp() {
    this.setState(() => {
      return {
        mouse: [null, null],
      };
    });
  }

  willLeave(key, valOfKey) {
    return {
      ...valOfKey,
      opacity: spring(0, [60, 15]),
      scale: spring(2, [60, 15]),
    };
  }

  willEnter(key, valOfKey) {
    return {
      ...valOfKey,
      opacity: 0,
      scale: 0,
    };
  }

  render() {
    const {mouse: [mouseX, mouseY], now} = this.state;
    const styles = mouseX == null ? {} : {
      [now]: {
        opacity: spring(1),
        scale: spring(1),
        x: spring(mouseX),
        y: spring(mouseY),
      },
    };
    return (
      <TransitionMotion
        willEnter={::this.willEnter}
        willLeave={::this.willLeave}
        styles={styles}>
        {circles =>
          <div
            onMouseDown={::this.handleMouseDown}
            onMouseUp={::this.handleMouseUp}
            className="demo7">
            {Object.keys(circles).reverse().map(key => {
              const {opacity, scale, x, y} = circles[key];
              return (
                <div
                  key={key}
                  className="demo7-ball"
                  style={{
                    opacity: opacity,
                    scale: scale,
                    transform: `translate3d(${x}px, ${y}px, 0) scale(${scale})`,
                    WebkitTransform: `translate3d(${x}px, ${y}px, 0) scale(${scale})`,
                  }} />
              );
            })}
          </div>
        }
      </TransitionMotion>
    );
  }
}