Get started with react-motion CDN

MIT licensed

React Motion: Smooth, interactive UI components with spring-physics animation in React.

Tags:
  • react
  • component
  • react-component
  • transitiongroup
  • spring
  • tween
  • motion
  • animation
  • transition
  • ui

Stable version

Copied!

How to start using 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);
Copied!
Copied!
Copied!

All versions