Old school D3 from simpler times

All examples By author By category About

jerstucki

Full window Github gist

React Motion Issue #294

Test case for React Motion issue #294.

When the animation has a low frame rate, React Motion's restarting logic restarts the animation constantly.

<!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>

https://npmcdn.com/trafo

https://npmcdn.com/react/dist/react.min.js

https://npmcdn.com/react-dom/dist/react-dom.min.js

https://npmcdn.com/react-motion@0.4.2/build/react-motion.js