React-Motion and Color Animation Experiment

Developer
Sarah Drasner
Size
4,695 Kb
Views
46,552
  1. React-Motion and Color Animation Experiment Previews
  2. React-Motion and Color Animation Experiment HTML Codes
  3. React-Motion and Color Animation Experiment CSS Codes
  4. React-Motion and Color Animation Experiment JS Codes

How do I make an react-motion and color animation experiment?

This is a little animation experiment with react-motion. A lot of this is just forked and messed with from the react-motion chat heads demo. https://github.com/chenglou/react-motion/tree/master/demos/demo1-chat-heads. It's interesting because we're updating placement based on the previous item, including things like like rotation. Color is made with a SASS function.. What is a react-motion and color animation experiment? How do you make a react-motion and color animation experiment? This script and codes were developed by Sarah Drasner on 12 June 2022, Sunday.

React-Motion and Color Animation Experiment Previews
IQ Test

React-Motion and Color Animation Experiment - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>React-Motion and Color Animation Experiment</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="app"></div> <script src='https://fb.me/react-with-addons-0.14.0.js'></script>
<script src='https://npmcdn.com/react-motion/build/react-motion.js'></script> <script src="js/index.js"></script>
</body>
</html>

React-Motion and Color Animation Experiment - Script Codes CSS Codes

.demo .s1 { border-left: 1px solid #666666; border-right: 1px solid #666666;
}
.demo .s2 { border-left: 1px solid #5e666e; border-right: 1px solid #5e666e;
}
.demo .s3 { border-left: 1px solid #575c75; border-right: 1px solid #575c75;
}
.demo .s4 { border-left: 1px solid #554f7d; border-right: 1px solid #554f7d;
}
.demo .s5 { border-left: 1px solid #624785; border-right: 1px solid #624785;
}
.demo .s6 { border-left: 1px solid #79408c; border-right: 1px solid #79408c;
}
.demo .s7 { border-left: 1px solid #94388e; border-right: 1px solid #94388e;
}
.demo .s8 { border-left: 1px solid #9c3073; border-right: 1px solid #9c3073;
}
.demo .s9 { border-left: 1px solid #a3294f; border-right: 1px solid #a3294f;
}
.demo .s10 { border-left: 1px solid #ab2121; border-right: 1px solid #ab2121;
}
.demo .s11 { border-left: 1px solid #b3491a; border-right: 1px solid #b3491a;
}
.demo .s12 { border-left: 1px solid #ba7b12; border-right: 1px solid #ba7b12;
}
.demo .s13 { border-left: 1px solid #c2b60a; border-right: 1px solid #c2b60a;
}
.demo .s14 { border-left: 1px solid #98c903; border-right: 1px solid #98c903;
}
.demo .s15 { border-left: 1px solid #59cc00; border-right: 1px solid #59cc00;
}
.demo .s16 { border-left: 1px solid #1acc00; border-right: 1px solid #1acc00;
}
.demo .s17 { border-left: 1px solid #00cc26; border-right: 1px solid #00cc26;
}
.demo .s18 { border-left: 1px solid #00cc66; border-right: 1px solid #00cc66;
}
.demo .s19 { border-left: 1px solid #00cca6; border-right: 1px solid #00cca6;
}
.demo .s20 { border-left: 1px solid #00b3cc; border-right: 1px solid #00b3cc;
}
.demo .playthings { position: absolute; width: 350px; height: 350px; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000px; perspective: 1000px;
}
html,
body { background: #333; font-family: 'Lato', sans-serif; overflow: hidden;
}
* { margin: 0; cursor: crosshair;
}
@media screen and (max-width: 600px) { .demo .playthings { width: 100px !important; height: 100px !important; }
}

React-Motion and Color Animation Experiment - Script Codes JS Codes

'use strict';
var _ReactMotion = ReactMotion;
var StaggeredMotion = _ReactMotion.StaggeredMotion;
var spring = _ReactMotion.spring;
var Demo = React.createClass({ displayName: 'Demo', getInitialState: function getInitialState() { return { x: 250, y: 300, rotate: 0 }; }, componentDidMount: function componentDidMount() { window.addEventListener('mousemove', this.handleMouseMove); window.addEventListener('touchmove', this.handleTouchMove); }, //we're setting the state to be equal to the position handleMouseMove: function handleMouseMove(_ref) { var x = _ref.pageX; var y = _ref.pageY; this.setState({ x: x, y: y }); }, handleTouchMove: function handleTouchMove(_ref2) { var touches = _ref2.touches; this.handleMouseMove(touches[0]); }, getStyles: function getStyles(prevStyles) { var _this = this; // we're using the previous style to update the next ones placement var endValue = prevStyles.map(function (_, i) { var stiff = 200, damp = 15; return i === 0 ? _this.state : { x: spring(prevStyles[i - 1].x, { stiffness: stiff, damping: damp }), y: spring(prevStyles[i - 1].y, { stiffness: stiff, damping: damp }), rotate: spring(i * 10, { stiffness: stiff, damping: damp }) }; }); return endValue; }, render: function render() { var arr = [], amtHalf = 175; for (var i = 0; i < 50; i++) { arr.push({ x: 0, y: 0, rotate: 0 }); } return React.createElement( 'div', null, React.createElement( StaggeredMotion, { defaultStyles: arr, styles: this.getStyles }, function (lines) { return React.createElement( 'div', { className: 'demo' }, lines.map(function (_ref3, i) { var x = _ref3.x; var y = _ref3.y; var rotate = _ref3.rotate; return React.createElement('div', { key: i, className: 'playthings s' + i // we have to subtract half the amount of $amt in the CSS panel so that the mouse stays in the center of the object we're creating , style: { WebkitTransform: 'translate3d(' + (x - amtHalf) + 'px, ' + (y - amtHalf) + 'px, 0) rotate(' + rotate + 'deg)', transform: 'translate3d(' + (x - amtHalf) + 'px, ' + (y - amtHalf) + 'px, 0) rotate(' + rotate + 'deg)' } }); }) ); } ) ); }
});
React.render(React.createElement(Demo, null), document.querySelector('#app'));
React-Motion and Color Animation Experiment - Script Codes
React-Motion and Color Animation Experiment - Script Codes
Home Page Home
Developer Sarah Drasner
Username sdras
Uploaded June 12, 2022
Rating 4.5
Size 4,695 Kb
Views 46,552
Do you need developer help for React-Motion and Color Animation Experiment?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Sarah Drasner (sdras) Script Codes
Name
Chart made with Vue, Transitioning State
VelocityJS and SVG Moving Isoscape
Pool Ripple
Gif masking in SVG
Google Material Design
Sketch
Vue Book Content Typer
Make a Party
Responsive Cow Jumps Over the Moooooon
Simple Responsive Scroll Snap Point Demo
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!