Get started with react-motion CDN

import React from 'react';
import { spring, animated } from 'react-motion';

class AnimatedBox extends React.Component {
  state = {
    x: 0,
  };

  handleClick = () => {
    this.setState({ x: spring(300, 0.3) });
  };

  render() {
    return (
      <div onClick={this.handleClick}>
        <button>Animate Box</button>
        <animated.div style={{ transform: this.state.x }}>
          <div style={{ width: '100px', height: '100px', backgroundColor: '#f00' }} />
        </animated.div>
      </div>
    );
  }
}

// Use the CDN link to import react-motion
const CDN_LINK = 'https://cdn.cdnhub.io/react-motion/0.5.2/react-motion.js';

// Set up a script tag to load react-motion from the CDN
const script = document.createElement('script');
script.src = CDN_LINK;
document.head.appendChild(script);

// Render the component after react-motion is loaded
setTimeout(() => {
  ReactDOM.render(<AnimatedBox />, document.getElementById('root'));
}, 1000);