47 |
48 |
49 |
50 |
51 |
52 |
53 |
--------------------------------------------------------------------------------
/demos/demo1-chat-heads/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
22 |
27 |
28 |
29 | {({x}) =>
30 | // children is a callback which should accept the current value of
31 | // `style`
32 |
40 |
41 | );
42 | };
43 | }
44 |
--------------------------------------------------------------------------------
/src/stepper.js:
--------------------------------------------------------------------------------
1 | /* @flow */
2 |
3 | // stepper is used a lot. Saves allocation to return the same array wrapper.
4 | // This is fine and danger-free against mutations because the callsite
5 | // immediately destructures it and gets the numbers inside without passing the
6 | // array reference around.
7 | let reusedTuple: [number, number] = [0, 0];
8 | export default function stepper(
9 | secondPerFrame: number,
10 | x: number,
11 | v: number,
12 | destX: number,
13 | k: number,
14 | b: number,
15 | precision: number,
16 | ): [number, number] {
17 | // Spring stiffness, in kg / s^2
18 |
19 | // for animations, destX is really spring length (spring at rest). initial
20 | // position is considered as the stretched/compressed position of a spring
21 | const Fspring = -k * (x - destX);
22 |
23 | // Damping, in kg / s
24 | const Fdamper = -b * v;
25 |
26 | // usually we put mass here, but for animation purposes, specifying mass is a
27 | // bit redundant. you could simply adjust k and b accordingly
28 | // let a = (Fspring + Fdamper) / mass;
29 | const a = Fspring + Fdamper;
30 |
31 | const newV = v + a * secondPerFrame;
32 | const newX = x + newV * secondPerFrame;
33 |
34 | if (Math.abs(newV) < precision && Math.abs(newX - destX) < precision) {
35 | reusedTuple[0] = destX;
36 | reusedTuple[1] = 0;
37 | return reusedTuple;
38 | }
39 |
40 | reusedTuple[0] = newX;
41 | reusedTuple[1] = newV;
42 | return reusedTuple;
43 | }
44 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | module.exports = {
4 | mode: "development",
5 | devtool:
6 | process.env.NODE_ENV === 'development' ? 'eval-source-map' : 'source-map',
7 | entry: {
8 | 'demo0-simple-transition': './demos/demo0-simple-transition/index.jsx',
9 | 'demo1-chat-heads': './demos/demo1-chat-heads/index.jsx',
10 | 'demo2-draggable-balls': './demos/demo2-draggable-balls/index.jsx',
11 | 'demo3-todomvc-list-transition': './demos/demo3-todomvc-list-transition/index.jsx',
12 | 'demo4-photo-gallery': './demos/demo4-photo-gallery/index.jsx',
13 | 'demo5-spring-parameters-chooser': './demos/demo5-spring-parameters-chooser/index.jsx',
14 | 'demo7-water-ripples': './demos/demo7-water-ripples/index.jsx',
15 | 'demo8-draggable-list': './demos/demo8-draggable-list/index.jsx',
16 | },
17 | output: {
18 | filename: '[name]/all.js',
19 | publicPath: '/demos/',
20 | path: __dirname + '/demos/',
21 | },
22 | module: {
23 | rules: [
24 | {
25 | test: /\.jsx?$/,
26 | exclude: /build|lib|bower_components|node_modules/,
27 | loader: 'babel-loader'
28 | },
29 | {
30 | test: /\.css$/,
31 | use: ['style-loader', 'css-loader']
32 | },
33 | {
34 | test: /\.jsx?$/,
35 | loader: 'eslint-loader',
36 | exclude: /build|lib|bower_components|node_modules/
37 | },
38 | ],
39 | },
40 | resolve: {
41 | extensions: ['.js', '.jsx']
42 | },
43 | };
44 |
--------------------------------------------------------------------------------
/demos/demo1-chat-heads/Demo.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {StaggeredMotion, spring, presets} from '../../src/react-motion';
3 | import range from 'lodash.range';
4 |
5 | export default class Demo extends React.Component {
6 | constructor(props) {
7 | super(props);
8 | this.state = {x: 250, y: 300};
9 | };
10 |
11 | componentDidMount() {
12 | window.addEventListener('mousemove', this.handleMouseMove);
13 | window.addEventListener('touchmove', this.handleTouchMove);
14 | };
15 |
16 | handleMouseMove = ({pageX: x, pageY: y}) => {
17 | this.setState({x, y});
18 | };
19 |
20 | handleTouchMove = ({touches}) => {
21 | this.handleMouseMove(touches[0]);
22 | };
23 |
24 | getStyles = (prevStyles) => {
25 | // `prevStyles` is the interpolated value of the last tick
26 | const endValue = prevStyles.map((_, i) => {
27 | return i === 0
28 | ? this.state
29 | : {
30 | x: spring(prevStyles[i - 1].x, presets.gentle),
31 | y: spring(prevStyles[i - 1].y, presets.gentle),
32 | };
33 | });
34 | return endValue;
35 | };
36 |
37 | render() {
38 | return (
39 |
33 |
37 |
38 | }
39 |
44 | {balls.map(({x, y}, i) =>
45 |
53 | )}
54 |
55 | }
56 |
73 |
74 |
75 | Original Framer.js Example
76 |
77 |
78 |
79 |
80 |
81 |
82 |
--------------------------------------------------------------------------------
/demos/demo7-water-ripples/Demo.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {TransitionMotion, spring} from '../../src/react-motion';
3 |
4 | const leavingSpringConfig = {stiffness: 60, damping: 15};
5 |
6 | export default class Demo extends React.Component {
7 | constructor(props) {
8 | super(props);
9 | this.state = {mouse: [], now: 't' + 0};
10 | };
11 |
12 | handleMouseMove = ({pageX, pageY}) => {
13 | // Make sure the state is queued and not batched.
14 | this.setState(() => {
15 | return {
16 | mouse: [pageX - 25, pageY - 25],
17 | now: 't' + Date.now(),
18 | };
19 | });
20 | };
21 |
22 | handleTouchMove = (e) => {
23 | e.preventDefault();
24 | this.handleMouseMove(e.touches[0]);
25 | };
26 |
27 | willLeave = (styleCell) => {
28 | return {
29 | ...styleCell.style,
30 | opacity: spring(0, leavingSpringConfig),
31 | scale: spring(2, leavingSpringConfig),
32 | };
33 | };
34 |
35 | render() {
36 | const {mouse: [mouseX, mouseY], now} = this.state;
37 | const styles = mouseX == null ? [] : [{
38 | key: now,
39 | style: {
40 | opacity: spring(1),
41 | scale: spring(0),
42 | x: spring(mouseX),
43 | y: spring(mouseY),
44 | }
45 | }];
46 | return (
47 |
53 | {circles.map(({key, style: {opacity, scale, x, y}}) =>
54 |
63 | )}
64 |
65 | }
66 |
53 |
78 | );
79 | };
80 | }
81 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "parser": "babel-eslint",
3 | "extends": ["airbnb", "prettier"],
4 | "env": {
5 | "browser": true,
6 | "es6": true,
7 | "jasmine": true
8 | },
9 | "rules": {
10 | "eqeqeq": [2, "allow-null"],
11 | "id-length": 0,
12 | "no-console": 0, // use it for warnings
13 | "no-nested-ternary": 0,
14 | "prefer-const": 0,
15 | "no-multiple-empty-lines": 0,
16 | "no-useless-escape": 0,
17 | "no-else-return": 0,
18 | "comma-dangle": 0,
19 | "lines-between-class-members": 0,
20 | "indent": 0,
21 | "operator-linebreak": 0,
22 | "object-curly-newline": 0,
23 | "function-paren-newline": 0,
24 | "prefer-destructuring": 0,
25 | "camelcase": ["error", {"allow": ["^UNSAFE_"]}],
26 |
27 | "react/jsx-wrap-multilines": 0,
28 | "react/jsx-one-expression-per-line": 0,
29 | "react/no-unused-state": 0,
30 | "react/require-default-props": 0,
31 | "react/destructuring-assignment": 0,
32 | "react/no-did-mount-set-state": 2,
33 | "react/no-multi-comp": 0,
34 | "react/jsx-boolean-value": [2, "always"],
35 | "react/sort-comp": [
36 | 2, {
37 | "order": [
38 | "displayName",
39 | "propTypes",
40 | "contextTypes",
41 | "childContextTypes",
42 | "mixins",
43 | "statics",
44 | "defaultProps",
45 | "getDefaultProps",
46 | "getInitialState",
47 | "getChildContext",
48 | "componentWillMount",
49 | "UNSAFE_componentWillMount",
50 | "componentDidMount",
51 | "componentWillReceiveProps",
52 | "UNSAFE_componentWillReceiveProps",
53 | "shouldComponentUpdate",
54 | "componentWillUpdate",
55 | "UNSAFE_componentWillUpdate",
56 | "componentDidUpdate",
57 | "componentWillUnmount",
58 | "/^on.+$/",
59 | "/^get.+$/",
60 | "/^render.+$/",
61 | "/^.+$/", // All other methods go here
62 | "render"
63 | ]
64 | }
65 | ],
66 |
67 | "max-len": 0,
68 | "no-mixed-operators": 0,
69 | "no-continue": 0,
70 | "no-restricted-syntax": 0,
71 | "no-plusplus": 0,
72 | "no-confusing-arrow": 0,
73 | "arrow-parens": 0,
74 | "arrow-body-style": 0,
75 | "react/jsx-indent": 0,
76 | "react/jsx-indent-props": 0,
77 | "react/jsx-closing-bracket-location": 0,
78 | "react/prefer-es6-class": 0,
79 | "react/jsx-filename-extension": 0,
80 | "react/prefer-stateless-function": 0,
81 | "object-curly-spacing": 0,
82 | "import/imports-first": 0,
83 | "import/no-unresolved": 0,
84 | "import/no-extraneous-dependencies": 0,
85 | "import/order": 0,
86 | "import/no-webpack-loader-syntax": 0,
87 | }
88 | }
89 |
--------------------------------------------------------------------------------
/src/Types.js:
--------------------------------------------------------------------------------
1 | /* @flow */
2 |
3 | // Babel 5.x doesn't support type parameters, so we make this alias here out of
4 | // Babel's sight.
5 | /* eslint-disable spaced-comment, no-undef */
6 | /*::
7 | import type {Element} from 'react';
8 | export type ReactElement = Element<*>;
9 | */
10 |
11 | // === basic reused types ===
12 | // type of the second parameter of `spring(val, config)` all fields are optional
13 | export type SpringHelperConfig = {
14 | stiffness?: number,
15 | damping?: number,
16 | precision?: number,
17 | };
18 | // the object returned by `spring(value, yourConfig)`. For internal usage only!
19 | export type OpaqueConfig = {
20 | val: number,
21 | stiffness: number,
22 | damping: number,
23 | precision: number,
24 | };
25 | // your typical style object given in props. Maps to a number or a spring config
26 | export type Style = { [key: string]: number | OpaqueConfig };
27 | // the interpolating style object, with the same keys as the above Style object,
28 | // with the values mapped to numbers, naturally
29 | export type PlainStyle = { [key: string]: number };
30 | // internal velocity object. Similar to PlainStyle, but whose numbers represent
31 | // speed. Might be exposed one day.
32 | export type Velocity = { [key: string]: number };
33 |
34 | // === Motion ===
35 | export type MotionProps = {
36 | defaultStyle?: PlainStyle,
37 | style: Style,
38 | children: (interpolatedStyle: PlainStyle) => ReactElement,
39 | onRest?: () => void,
40 | };
41 |
42 | // === StaggeredMotion ===
43 | export type StaggeredProps = {
44 | defaultStyles?: ArrayScroll Me
54 |
55 |
61 |
62 |
63 |
64 | {container =>
65 |
76 |
77 |
66 | {configs.map((style, i) =>
67 |
68 | {style =>
69 | 
70 | }
71 |
72 | )}
73 |
74 | }
75 |
70 | }
71 |
119 |
123 |
124 |
125 |
126 | Default: {stiffness: 170, damping: 26}
120 |