Loading...
: null // Don't flash "Loading..." when we don't need to.
6 | } else if (error) {
7 | return (
8 | {
21 | this.node = node
22 | }}
23 | style={{
24 | flex: 1,
25 | width: '100%',
26 | height: '100%',
27 | backgroundColor: '#212529',
28 | perspective: 1000,
29 | overflow: 'hidden'
30 | }}
31 | onMouseMove={({ pageX: x, pageY: y }) => this.setState({ x, y })}
32 | onMouseDown={() => this.setState({ mouseDown: true })}
33 | onMouseUp={() => this.setState({ mouseDown: false })}
34 | onMouseEnter={() => {
35 | const rect = this.node.getBoundingClientRect()
36 | this.setState({ offsetTop: rect.top, offsetLeft: rect.left })
37 | }}
38 | onMouseLeave={() => this.setState({ mouseDown: false })}
39 | />
40 | ),
41 | getKey: data => data.key,
42 | onComponentMount: () => ({ x, y, z: 0, hue: 0 }),
43 | onRender: (data, i, spring) => ({
44 | x: spring(x, WOBBLY_SPRING),
45 | y: spring(y, WOBBLY_SPRING),
46 | z: spring(this.state.mouseDown ? i * 30 : 0, WOBBLY_SPRING),
47 | hue: spring((x * i + y * i) / 2 % 360)
48 | }),
49 | onRemount: () => ({ x, y, z: 0, hue: 0 }), // Does not matter since data does not change
50 | onUnmount: () => ({ x, y, z: 0, hue: 0 }), // Does not matter since data does not change
51 | render: this.renderCircle
52 | })
53 | }
54 |
55 | renderCircle = (key, data, style, dataIndex, layerIndex) => {
56 | return (
57 |
74 | )
75 | };
76 | }
77 |
78 | export default () => {
79 | return (
80 |
81 |
91 | {'Move mouse & Hold mouse down'}
92 |
93 |
94 | )
95 | }
96 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "data-driven-motion",
3 | "version": "0.0.10",
4 | "description": "Declarative animation in react.",
5 | "jsnext:main": "dist/data-driven-motion.es.js",
6 | "module": "dist/data-driven-motion.es.js",
7 | "main": "dist/data-driven-motion.js",
8 | "umd:main": "dist/data-driven-motion.umd.js",
9 | "files": [
10 | "dist"
11 | ],
12 | "scripts": {
13 | "build": "npm-run-all clean -p rollup -p minify:* -s size",
14 | "clean": "rimraf dist",
15 | "test": "standard src test && jest --coverage",
16 | "test:watch": "jest --watch",
17 | "rollup": "rollup -c",
18 | "minify:cjs": "uglifyjs $npm_package_main -cm toplevel -o $npm_package_main -p relative --in-source-map ${npm_package_main}.map --source-map ${npm_package_main}.map",
19 | "minify:umd": "uglifyjs $npm_package_umd_main -cm -o $npm_package_umd_main -p relative --in-source-map ${npm_package_umd_main}.map --source-map ${npm_package_umd_main}.map",
20 | "size": "echo \"Gzipped Size: $(strip-json-comments --no-whitespace $npm_package_main | gzip-size)\"",
21 | "release": "npm run test && npm run build && npm version patch && npm publish && git push --tags"
22 | },
23 | "dependencies": {
24 | "prop-types": "^15.5.10",
25 | "react-motion": "^0.4.7"
26 | },
27 | "peerDependencies": {
28 | "react": "15.x"
29 | },
30 | "devDependencies": {
31 | "babel-eslint": "^7.2.1",
32 | "babel-jest": "^19.0.0",
33 | "babel-polyfill": "^6.23.0",
34 | "babel-preset-env": "^1.4.0",
35 | "babel-preset-react": "^6.24.1",
36 | "babel-preset-stage-2": "^6.24.1",
37 | "color-name": "^1.1.2",
38 | "d3-array": "^1.1.1",
39 | "d3-random": "^1.0.3",
40 | "d3-scale": "^1.0.5",
41 | "d3-shape": "^1.0.6",
42 | "gh-pages": "^0.12.0",
43 | "github-markdown-css": "^2.5.0",
44 | "gzip-size-cli": "^2.0.0",
45 | "html-loader": "^0.4.5",
46 | "jest": "^20.0.1",
47 | "markdown-loader": "^2.0.0",
48 | "npm-run-all": "^4.0.2",
49 | "open-color": "^1.5.1",
50 | "preact": "^8.0.0",
51 | "preact-compat": "^3.14.3",
52 | "prettier": "^0.20.0",
53 | "pretty-bytes-cli": "^2.0.0",
54 | "raw-loader": "^0.5.1",
55 | "react": "^15.5.4",
56 | "react-addons-test-utils": "^15.5.1",
57 | "react-crate": "^2.0.0",
58 | "react-dom": "^15.5.4",
59 | "react-loadable": "^3.0.1",
60 | "react-motion": "^0.4.7",
61 | "react-router-dom": "^4.0.0",
62 | "react-svg-morph": "^0.1.10",
63 | "react-test-renderer": "^15.5.4",
64 | "rebass": "^0.4.0-beta.9",
65 | "recompose": "^0.22.0",
66 | "rgb-to-hsl": "0.0.3",
67 | "rimraf": "^2.6.1",
68 | "rollup": "^0.41.6",
69 | "rollup-plugin-babel": "^2.7.1",
70 | "rollup-plugin-commonjs": "^8.0.2",
71 | "rollup-plugin-node-resolve": "^3.0.0",
72 | "standard": "^10.0.2",
73 | "strip-json-comments-cli": "^1.0.1",
74 | "uglify-js": "^2.8.22"
75 | },
76 | "author": "Kye Hohenberger",
77 | "homepage": "https://github.com/tkh44/data-driven-motion#readme",
78 | "license": "MIT",
79 | "repository": {
80 | "type": "git",
81 | "url": "git+https://github.com/tkh44/data-driven-motion.git"
82 | },
83 | "keywords": [
84 | "react",
85 | "react-motion",
86 | "animtion",
87 | "react-animation",
88 | "data",
89 | "driven",
90 | "motion"
91 | ],
92 | "directories": {
93 | "test": "test"
94 | },
95 | "bugs": {
96 | "url": "https://github.com/tkh44/data-driven-motion/issues"
97 | },
98 | "eslintConfig": {
99 | "extends": "standard",
100 | "parser": "babel-eslint"
101 | },
102 | "standard": {
103 | "parser": "babel-eslint",
104 | "ignore": [
105 | "/dist/",
106 | "/demo/"
107 | ]
108 | }
109 | }
110 |
--------------------------------------------------------------------------------
/demo/src/demos/List.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import { Motion } from '../../../src'
3 | import Demo from '../Demo'
4 |
5 | let items = []
6 | for (let i = 100; i > 0; i--) {
7 | items[i] = { id: i, name: `Item ${i}`, username: `User ${i}` }
8 | }
9 | const WOBBLY_SPRING = { stiffness: 280, damping: 30 }
10 |
11 | class ListDemo extends Component {
12 | state = {
13 | filter: 2
14 | };
15 |
16 | render () {
17 | return (
18 |
21 |
this.setState({ filter: value })}
32 | />
33 |
40 | Divisible by {this.state.filter}
41 |
42 |
d.id % this.state.filter === 0)
45 | .map((d, i) => {
46 | d.index = i
47 | return d
48 | })}
49 | />
50 |
51 | )
52 | }
53 | }
54 |
55 | class ListWrapper extends Component {
56 | render () {
57 | return (
58 |
68 | }
69 | getKey={(data, i) => i + ''}
70 | onComponentMount={(data, i) => {
71 | return {
72 | opacity: 1,
73 | hue: i * 4 % 360,
74 | xOffset: 0,
75 | yOffset: i * 14
76 | }
77 | }}
78 | onRender={(data, i, spring) => {
79 | return {
80 | opacity: spring(1),
81 | hue: spring(i * 4 % 360),
82 | xOffset: spring(0, WOBBLY_SPRING),
83 | yOffset: spring(i * 16, WOBBLY_SPRING)
84 | }
85 | }}
86 | onRemount={({ key, data, style }) => {
87 | return {
88 | opacity: 1,
89 | hue: 0,
90 | xOffset: -100,
91 | yOffset: 0
92 | }
93 | }}
94 | onUnmount={({ key, data, style }, spring) => {
95 | return {
96 | opacity: spring(0),
97 | hue: spring(0),
98 | xOffset: spring(100, WOBBLY_SPRING),
99 | yOffset: spring(0, WOBBLY_SPRING)
100 | }
101 | }}
102 | render={[this.renderLi, this.renderLi]}
103 | />
104 | )
105 | }
106 |
107 | renderLi = (key, data, style, dataIndex, layerIndex) => {
108 | return (
109 |
124 | {data.username}
125 |
126 | )
127 | };
128 | }
129 |
130 | export default () => {
131 | return (
132 |
133 |
135 | )
136 | }
137 |
--------------------------------------------------------------------------------
/demo/src/demos/Slider.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PureComponent } from 'react'
2 | import { Motion } from '../../../src'
3 | import Demo from '../Demo'
4 |
5 | const WOBBLY_SPRING = { stiffness: 420, damping: 80 }
6 |
7 | let DATA = []
8 | for (let i = 0; i < 5; i++) {
9 | DATA[i] = {
10 | id: i + 1 + '',
11 | text: `Slide ${i + 1}`,
12 | url: `//lorempixel.com/800/450/nature/${i}`
13 | }
14 | }
15 |
16 | class Slider extends PureComponent {
17 | state = {
18 | slide: 0
19 | };
20 |
21 | componentDidMount () {
22 | this.interval = window.setInterval(
23 | () => {
24 | this.setState(prev => ({ slide: (prev.slide + 1) % DATA.length }))
25 | },
26 | 2000
27 | )
28 | }
29 |
30 | componentWillUnmount () {
31 | window.clearInterval(this.interval)
32 | }
33 |
34 | render () {
35 | return (
36 |
39 | this.setState(prev => ({ slide: (prev.slide + 1) % DATA.length }))}
40 | >
41 |
43 | )
44 | }
45 | }
46 |
47 | class Slides extends Component {
48 | render () {
49 | return (
50 |
63 | }
64 | getKey={(data, i) => data.id}
65 | onComponentMount={(data, i) => {
66 | return {
67 | opacity: 1,
68 | x: this.props.slide * -100,
69 | textX: this.props.slide * -100
70 | }
71 | }}
72 | onRender={(data, i, spring) => {
73 | return {
74 | opacity: spring(1),
75 | x: spring(this.props.slide * -100, WOBBLY_SPRING),
76 | textX: spring(this.props.slide * -100, {
77 | stiffness: 200,
78 | damping: 80
79 | })
80 | }
81 | }}
82 | render={[this.renderSlide, this.renderText]}
83 | />
84 | )
85 | }
86 |
87 | renderSlide = (key, data, style, dataIndex, layerIndex) => {
88 | return (
89 |
101 |
109 | )
110 | };
111 |
112 | renderText = (key, data, style, dataIndex, layerIndex) => {
113 | return (
114 |
126 |
134 | {data.text}
135 |
136 |
137 | )
138 | };
139 | }
140 |
141 | export default () => {
142 | return (
143 |
144 |
146 | )
147 | }
148 |
--------------------------------------------------------------------------------
/demo/src/demos/ColorSearch.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import { Motion } from '../../../src'
3 | import Demo from '../Demo'
4 | import colorMap from 'color-name'
5 | import rgbToHsl from 'rgb-to-hsl'
6 |
7 | const STIFF_SPRING = { stiffness: 200, damping: 20 }
8 | const colors = Object.keys(colorMap).map((name, i) => ({
9 | name,
10 | index: i,
11 | rgb: colorMap[name],
12 | hsl: rgbToHsl(...colorMap[name])
13 | }))
14 |
15 | class Input extends Component {
16 | render () {
17 | return (
18 |
41 | )
42 | }
43 | }
44 |
45 | class ColorList extends Component {
46 | render () {
47 | return (
48 |
64 | }
65 | getKey={this.getKey}
66 | onComponentMount={this.onComponentMount}
67 | onRender={this.onRender}
68 | onRemount={this.onRemount}
69 | render={this.renderResult}
70 | />
71 | )
72 | }
73 |
74 | getKey = (data, i) => data.name;
75 |
76 | onComponentMount = (data, i) => ({
77 | width: 1 / (this.props.data.length / 100),
78 | o: 0
79 | });
80 |
81 | onRender = (data, i, spring) => ({
82 | width: data.found
83 | ? spring(1 / (this.props.foundCount / 100), STIFF_SPRING)
84 | : 0,
85 | o: spring(1, STIFF_SPRING)
86 | });
87 |
88 | renderResult = (key, data, { width, o }) => {
89 | return (
90 |
105 | )
106 | };
107 | }
108 |
109 | class ColorSearch extends Component {
110 | state = { colorName: '' };
111 |
112 | render () {
113 | const { colorName } = this.state
114 | let foundCount = 0
115 | const data = colors.map(color => {
116 | const found = color.name.includes(colorName)
117 | if (found) ++foundCount
118 | return { ...color, found }
119 | })
120 |
121 | return (
122 |
123 |
126 | )
127 | }
128 |
129 | handleInputChange = ({ target: { value: colorName } }) => {
130 | this.setState(() => ({colorName}))
131 | };
132 | }
133 |
134 | export default () => (
135 |
136 |
138 | )
139 |
--------------------------------------------------------------------------------
/demo/src/demos/America.js:
--------------------------------------------------------------------------------
1 | import flagImgUrl from '../static/usa-flag.png'
2 | import React, { Component, PureComponent } from 'react'
3 | import { Motion } from '../../../src'
4 | import Demo from '../Demo'
5 | import { normalizePaths, getProgress } from 'react-svg-morph/lib/utils/morph'
6 | import scalePath from 'react-svg-morph/lib/utils/scalePath'
7 | import { EAGLE_PATH, USA_PATH } from './svg-paths'
8 |
9 | const WOBBLY_SPRING = { stiffness: 200, damping: 15 }
10 | const width = 800
11 | const height = 450
12 |
13 | class America extends PureComponent {
14 | render () {
15 | const { from: usa, to: eagle } = normalizePaths(
16 | [{ path: scalePath(USA_PATH, height, 640, 412), trans: {} }],
17 | [{ path: scalePath(EAGLE_PATH, height, 794, 1122), trans: {} }]
18 | )
19 |
20 | return (
21 |
27 |
28 |
34 |
42 |
43 |
45 | )
46 | }
47 | }
48 |
49 | class Patriot extends Component {
50 | render () {
51 | return (
52 |
}
55 | getKey={this.getKey}
56 | onComponentMount={this.onCpm}
57 | onRender={this.onRender}
58 | render={this.renderAmerica}
59 | />
60 | )
61 | }
62 |
63 | getKey = (data, i) => i + '-USA';
64 |
65 | onCpm = (data, i) => ({ val: data });
66 |
67 | onRender = (data, i, spring) => ({ val: spring(data, WOBBLY_SPRING) });
68 |
69 | renderAmerica = (key, data, { val }, dataIndex) => {
70 | const [snapshot] = getProgress(this.props.usa, this.props.eagle, val)
71 |
72 | return (
73 |
80 | )
81 | };
82 | }
83 |
84 | export default class extends Component {
85 | constructor (props) {
86 | super(props)
87 |
88 | this.state = { val: 0 }
89 | }
90 |
91 | render () {
92 | return (
93 |
94 |
114 | this.setState(prev => ({ val: prev.val === 0 ? 1 : 0 }))}
115 | >
116 | Toggle
117 |
118 |
120 | )
121 | }
122 | }
123 |
124 | const buttonStyle = {
125 | position: 'absolute',
126 | top: 8,
127 | right: 8,
128 | backgroundColor: 'transparent',
129 | color: '#37b24d',
130 | fontWeight: 'bold',
131 | borderRadius: 4,
132 | height: 32,
133 | lineHeight: 2.5,
134 | paddingLeft: 16,
135 | paddingRight: 16,
136 | outline: 'none',
137 | border: '1px solid #37b24d'
138 | }
139 |
--------------------------------------------------------------------------------
/demo/src/demos/Scatterplot.js:
--------------------------------------------------------------------------------
1 | // Inspired by https://bl.ocks.org/mbostock/4060954
2 | import React, { Component, PureComponent } from 'react'
3 | import { Motion } from '../../../src'
4 | import Demo from '../Demo'
5 | import { scaleLinear } from 'd3-scale'
6 | import { min, max } from 'd3-array'
7 | import { randomUniform } from 'd3-random'
8 | const WOBBLY_SPRING = { stiffness: 60, damping: 15 }
9 |
10 | const radiusGenerator = randomUniform(2, 8)
11 | function randomRadius () {
12 | return radiusGenerator()
13 | }
14 |
15 | const width = 800
16 | const height = 450
17 |
18 | class Scatterplot extends PureComponent {
19 | render () {
20 | const { points } = this.props
21 | const maxY = max(points, d => d[1])
22 | const minY = min(points, d => d[1])
23 | const maxX = max(points, d => d[0])
24 | const xScale = scaleLinear().domain([0, maxX]).range([0, width])
25 | const yScale = scaleLinear().domain([minY, maxY]).range([height, 0])
26 |
27 | return (
28 |
34 |
43 | )
44 | }
45 | }
46 |
47 | class Layer extends Component {
48 | render () {
49 | return (
50 |
}
53 | getKey={this.getKey}
54 | onComponentMount={this.onCpm}
55 | onRender={this.onRender}
56 | onRemount={this.onRe}
57 | onUnmount={this.onUn}
58 | render={this.renderCircle}
59 | />
60 | )
61 | }
62 |
63 | getKey = (data, i) => i + '-' + (randomUniform(1, 2)() | 0);
64 |
65 | onCpm = (data, i) => {
66 | return {
67 | opacity: 0,
68 | r: 0,
69 | x: this.props.xScale(0),
70 | y: this.props.yScale(i % 2 ? this.props.maxY : 0)
71 | }
72 | };
73 |
74 | onRender = (data, i, spring) => {
75 | return {
76 | opacity: spring(1),
77 | r: spring(data.radius),
78 | x: spring(this.props.xScale(data[0]), WOBBLY_SPRING),
79 | y: spring(this.props.yScale(data[1]), WOBBLY_SPRING)
80 | }
81 | };
82 |
83 | onRe = ({ key, data, style }, i) => {
84 | return {
85 | opacity: 0,
86 | r: 0,
87 | x: this.props.xScale(0),
88 | y: this.props.yScale(i % 2 ? this.props.maxY : 0)
89 | }
90 | };
91 |
92 | onUn = ({ key, data, style }, spring) => {
93 | return {
94 | opacity: spring(0),
95 | r: spring(0),
96 | x: spring(this.props.xScale(this.props.maxX), WOBBLY_SPRING),
97 | y: spring(this.props.yScale(this.props.minY), WOBBLY_SPRING)
98 | }
99 | };
100 |
101 | renderCircle = (key, data, style, dataIndex) => {
102 | return (
103 |
111 | )
112 | };
113 | }
114 |
115 | export default class extends Component {
116 | constructor (props) {
117 | super(props)
118 |
119 | this.state = {
120 | points: this.generateLayers(5)
121 | }
122 | }
123 |
124 | componentDidMount () {
125 | this.interval = window.setInterval(
126 | () => {
127 | return this.setState({ points: this.generateLayers(randomUniform(1, 500)() | 0) })
128 | },
129 | 1000
130 | )
131 | }
132 |
133 | componentWillUnmount () {
134 | window.clearInterval(this.interval)
135 | }
136 |
137 | render () {
138 | return (
139 |
140 |
141 | {`Animating ${this.state.points.length} circle elements`}
142 |
143 |
145 | )
146 | }
147 |
148 | generateLayers = itemCount => {
149 | let points = []
150 | for (let i = itemCount; i > -1; i--) {
151 | points[i] = [i, Math.random() * 100 | 0]
152 | points[i].radius = randomRadius()
153 | }
154 |
155 | return points
156 | };
157 | }
158 |
159 | const buttonStyle = {
160 | position: 'absolute',
161 | top: 8,
162 | right: 8,
163 | backgroundColor: 'transparent',
164 | color: '#37b24d',
165 | fontWeight: 'bold',
166 | borderRadius: 4,
167 | height: 32,
168 | lineHeight: 2.5,
169 | paddingLeft: 16,
170 | paddingRight: 16,
171 | border: 'none',
172 | outline: 'none'
173 | }
174 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import {TransitionMotion, spring} from 'react-motion'
4 |
5 | const h = React.createElement
6 |
7 | export class Motion extends React.PureComponent {
8 | constructor (props) {
9 | super(props)
10 |
11 | this.renderCurrentStyles = this.renderCurrentStyles.bind(this)
12 | this.getKey = this.getKey.bind(this)
13 | this.getDefaultStyles = this.getDefaultStyles.bind(this)
14 | this.getStyles = this.getStyles.bind(this)
15 | this.willLeave = this.willLeave.bind(this)
16 | this.willEnter = this.willEnter.bind(this)
17 | }
18 |
19 | render () {
20 | const {data, onRemount, onUnmount, onComponentMount} = this.props
21 |
22 | return h(TransitionMotion, {
23 | defaultStyles: data.length && onComponentMount
24 | ? this.getDefaultStyles()
25 | : undefined,
26 | styles: this.getStyles(),
27 | willEnter: onRemount && this.willEnter,
28 | willLeave: onUnmount && this.willLeave,
29 | children: this.renderCurrentStyles
30 | })
31 | }
32 |
33 | renderCurrentStyles (currentStyles) {
34 | const {component, render} = this.props
35 | let children
36 | if (Array.isArray(render)) {
37 | // If render is an array, children becomes and array of arrays.
38 | // This is useful if you want to create layers of animation
39 | children = new Array(render.length)
40 | for (let i = 0; i < render.length; ++i) {
41 | children[i] = new Array(currentStyles.length)
42 | for (let j = 0; j < currentStyles.length; ++j) {
43 | const {key, data, style} = currentStyles[j]
44 | children[i][j] = render[i](key, data, style, j, i)
45 | }
46 | }
47 | } else {
48 | children = new Array(currentStyles.length)
49 | for (let j = 0; j < currentStyles.length; ++j) {
50 | const {key, data, style} = currentStyles[j]
51 | children[j] = render(key, data, style, j, 0)
52 | }
53 | }
54 |
55 | return React.cloneElement(component, {}, children)
56 | }
57 |
58 | getKey (data, i) {
59 | const {getKey} = this.props
60 | return getKey(data, i)
61 | }
62 |
63 | getDefaultStyles () {
64 | const {
65 | getKey,
66 | onComponentMount,
67 | data
68 | } = this.props
69 |
70 | let mappedData = new Array(data.length)
71 | for (let i = 0; i < data.length; ++i) {
72 | mappedData[i] = {
73 | key: getKey(data[i], i),
74 | data: data[i],
75 | style: onComponentMount(data[i], i)
76 | }
77 | }
78 |
79 | return mappedData
80 | }
81 |
82 | getStyles () {
83 | const {
84 | getKey,
85 | onRender,
86 | data
87 | } = this.props
88 |
89 | let mappedData = new Array(data.length)
90 | for (let i = 0; i < data.length; ++i) {
91 | mappedData[i] = {
92 | key: getKey(data[i], i),
93 | data: data[i],
94 | style: onRender(data[i], i, spring)
95 | }
96 | }
97 |
98 | return mappedData
99 | }
100 |
101 | willEnter (config) {
102 | const {onRemount} = this.props
103 | return onRemount(config)
104 | }
105 |
106 | willLeave (config) {
107 | const {onUnmount} = this.props
108 | return onUnmount(config, spring)
109 | }
110 | }
111 |
112 | Motion.defaultProps = {
113 | component: h('div'),
114 | data: []
115 | }
116 |
117 | Motion.propTypes = {
118 | // wrapper element ex:
119 | component: PropTypes.element,
120 |
121 | // array of data
122 | data: PropTypes.array,
123 |
124 | // (key, data, style) => ReactElement
125 | // called on render for each item in `data` with the key from `getKey`, `data` from `data[index]`, and
126 | // `style`, the result of: `onComponentMount`, `onRender`, `onRemount`, or `onUnmount`
127 | //
128 | // If an array is provided it will render the resulting elements in order.
129 | // This is useful for creating animated layers.
130 | render: PropTypes.oneOfType([
131 | PropTypes.func,
132 | PropTypes.arrayOf(PropTypes.func)
133 | ]),
134 |
135 | // (data, i) => string
136 | // help identify which items have been changed, added, or are removed
137 | // https://facebook.github.io/react/docs/lists-and-keys.html
138 | getKey: PropTypes.func,
139 |
140 | // (data, i) => Style object
141 | // data === props.data[i]
142 | // called when `component` mounts
143 | // do not wrap values in springs
144 | onComponentMount: PropTypes.func,
145 |
146 | // (data, i, spring) => Style object
147 | // data === props.data[i]
148 | // called on every render
149 | // ok to wrap values in springs
150 | onRender: PropTypes.func,
151 |
152 | // ({ data }, i) => Style object
153 | // data === props.data[i]
154 | // do not wrap values in springs
155 | onRemount: PropTypes.func,
156 |
157 | // ({ data }, i, spring) => Style object
158 | // data === props.data[i]
159 | // ok to wrap values in springs
160 | onUnmount: PropTypes.func
161 | }
162 |
--------------------------------------------------------------------------------
/demo/src/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import {
3 | HashRouter as Router,
4 | Route,
5 | Link,
6 | matchPath,
7 | withRouter
8 | } from 'react-router-dom'
9 | import crate from './crate'
10 | import Loading from './Loading'
11 | import { Motion } from '../../src'
12 | import colors from 'open-color'
13 | import TrippyDemo from './demos/Trippy'
14 | import ListDemo from './demos/List'
15 | import Scatterplot from './demos/Scatterplot'
16 | import America from './demos/America'
17 | import Slider from './demos/Slider'
18 | import ColorSearch from './demos/ColorSearch'
19 |
20 | const WOBBLY_SPRING = { stiffness: 350, damping: 15, precision: 0.1 }
21 |
22 | const ApiDocs = crate.asyncCompile({
23 | loader: () => import('./docs/Api'),
24 | LoadingComponent: Loading,
25 | delay: 200
26 | })
27 |
28 | // const TrippyDemo = crate.asyncCompile({
29 | // loader: () => import('./demos/Trippy'),
30 | // LoadingComponent: Loading,
31 | // delay: 200
32 | // })
33 | //
34 | // const ListDemo = crate.asyncCompile({
35 | // loader: () => import('./demos/List'),
36 | // LoadingComponent: Loading,
37 | // delay: 200
38 | // })
39 |
40 | const HomePage = ({ style }) => {
41 | return (
42 |
43 |
44 |
data-driven-motion
45 |
Easily animate your data in react
46 |
47 | npm install -S data-driven-motion
48 |
49 |
71 |
72 |
73 | )
74 | }
75 |
76 | const DemosPage = ({ style }) => (
77 |
78 |
79 |
80 | SVG Path Transformation
81 |
85 | Source
86 |
87 |
88 |
89 |
90 |
91 | Scatter Plot (1 - 500 elements)
92 |
96 | Source
97 |
98 |
99 |
100 |
101 |
110 |
111 |
112 |
121 |
122 |
123 |
124 | Trippy Perspective
125 |
129 | Source
130 |
131 |
132 |
133 |
134 |
135 | List with multiple layers
136 |
140 | Source
141 |
142 |
143 |
144 |
145 |
146 | )
147 |
148 | const AnimationExample = () => (
149 |
150 |
151 |
161 |
162 |
164 |
186 |
187 |
188 |
192 |
194 | )
195 |
196 | const AnimatedSwitch = withRouter(
197 | class AnimatedSwitch extends React.Component {
198 | render () {
199 | const { children, route, style } = this.props
200 | const location = this.props.location || this.context.route.location
201 | let match, child
202 | React.Children.forEach(children, element => {
203 | if (!React.isValidElement(element)) return
204 |
205 | const { path: pathProp, exact, strict, from } = element.props
206 | const path = pathProp || from
207 |
208 | if (match == null) {
209 | child = element
210 | match = path
211 | ? matchPath(location.pathname, { path, exact, strict })
212 | : route.match
213 | }
214 | })
215 |
216 | return (
217 |
}
220 | render={(key, data, style) => {
221 | return React.cloneElement(data.child, {
222 | key,
223 | location: data.location,
224 | computedMatch: data.match,
225 | style: {
226 | transform: `translate3d(0, ${style.y}%, 0)`,
227 | opacity: style.o
228 | }
229 | })
230 | }}
231 | getKey={({ child, location, match }) => {
232 | return child.props.getKey // param values used when generating keys
233 | ? child.props.getKey({ location, match })
234 | : child.props.path || child.props.from
235 | }}
236 | onComponentMount={data => ({ y: 50, o: 0.75 })}
237 | onRender={(data, i, spring) => ({
238 | y: spring(0, WOBBLY_SPRING),
239 | o: spring(1)
240 | })}
241 | onRemount={({ data: { child } }) => ({ y: 5, o: 0 })}
242 | onUnmount={({ data: { child } }, spring) => ({
243 | y: spring(20, WOBBLY_SPRING),
244 | o: spring(0)
245 | })}
246 | />
247 | )
248 | }
249 | }
250 | )
251 |
252 | const AnimatedRoute = ({ component: Component, style, getKey, ...rest }) => {
253 | return (
254 |
(
257 |