jstcki/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Test case for React Motion issue #294.
When the animation has a low frame rate, React Motion's restarting logic restarts the animation constantly.

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <style>
    body {
      margin:0;
      font-family: Helvetica, sans-serif;
      font-size: 3em;
    }
    .item {
      position: absolute;
      width: 5px;
      height: 5px;
      opacity: 0.5;
      background-color: #f55;
    }
  </style>
</head>

<body>
  <div id="app" />
  <script src="https://npmcdn.com/trafo"></script>
  <script src="https://npmcdn.com/react/dist/react.min.js"></script>
  <script src="https://npmcdn.com/react-dom/dist/react-dom.min.js"></script>
  <script src="https://npmcdn.com/react-motion@0.4.2/build/react-motion.js"></script>

  <script type="text/babel">
    const {TransitionMotion, spring, presets} = ReactMotion;

    const getStyle = (d) => ({
      key: d.key,
      style: {
        x: spring(d.x),
        y: spring(d.y)
      }
    });

    const getDefaultStyle = (d) => ({
      key: d.key,
      style: {
        x: 480,
        y: 250
      }
    });

    const data = Array(5000).fill(1).map((d, i) => ({key: String(i), x: Math.random() * 960, y: Math.random() * 500}));

    const Item = ({key, style}) => <div className='item' style={{transform: `translate(${style.x}px,${style.y}px)`}}>{key}</div>;

    const Lots = ({data}) => (
    	<TransitionMotion
        styles={data.map(getStyle)}
        defaultStyles={data.map(getDefaultStyle)}
      >
        {(motionStyles) => (
        	<div>
          	{motionStyles.map((props) => <Item {...props} />)}
    			</div>
        )}
      </TransitionMotion>
    );

    ReactDOM.render(
    	<Lots data={data} />,
    	document.getElementById('app')
    );
  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<style>
	body {
	margin:0;
	font-family: Helvetica, sans-serif;
	font-size: 3em;
	}
	.item {
	position: absolute;
	width: 5px;
	height: 5px;
	opacity: 0.5;
	background-color: #f55;
	}
	</style>
	</head>

	<body>
	<div id="app" />
	<script src="https://npmcdn.com/trafo"></script>
	<script src="https://npmcdn.com/react/dist/react.min.js"></script>
	<script src="https://npmcdn.com/react-dom/dist/react-dom.min.js"></script>
	<script src="https://npmcdn.com/react-motion@0.4.2/build/react-motion.js"></script>

	<script type="text/babel">
	const {TransitionMotion, spring, presets} = ReactMotion;

	const getStyle = (d) => ({
	key: d.key,
	style: {
	x: spring(d.x),
	y: spring(d.y)
	}
	});

	const getDefaultStyle = (d) => ({
	key: d.key,
	style: {
	x: 480,
	y: 250
	}
	});

	const data = Array(5000).fill(1).map((d, i) => ({key: String(i), x: Math.random() * 960, y: Math.random() * 500}));

	const Item = ({key, style}) => <div className='item' style={{transform: `translate(${style.x}px,${style.y}px)`}}>{key}</div>;

	const Lots = ({data}) => (
	<TransitionMotion
	styles={data.map(getStyle)}
	defaultStyles={data.map(getDefaultStyle)}
	>
	{(motionStyles) => (
	<div>
	{motionStyles.map((props) => <Item {...props} />)}
	</div>
	)}
	</TransitionMotion>
	);

	ReactDOM.render(
	<Lots data={data} />,
	document.getElementById('app')
	);
	</script>
	</body>