Skip to content

Instantly share code, notes, and snippets.

@thomas-jeepe
Created November 3, 2015 03:01
Show Gist options
  • Save thomas-jeepe/e30188f311dd5257bb69 to your computer and use it in GitHub Desktop.
Save thomas-jeepe/e30188f311dd5257bb69 to your computer and use it in GitHub Desktop.
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>
);
}
}
@chenglou
Copy link

chenglou commented Nov 3, 2015

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>
    );
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment