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!