How to use the react-motion.Motion function in react-motion
To help you get started, we’ve selected a few react-motion examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
mendersoftware / gui / node_modules / react-collapse / lib / Collapse.js View on Github 
if (!isOpened && height > -1) {
if (!keepCollapsedContent) {
return null;
}
return _react2.default.createElement(
'div',
_extends({ style: _extends({ height: 0, overflow: 'hidden' }, style) }, props),
content
);
}
// to prevent loosing input after causing this component to rerender
return _react2.default.createElement(
_reactMotion.Motion,
{
defaultStyle: { height: Math.max(0, height) },
style: { height: Math.max(0, height) },
onRest: onRest },
function () {
return _react2.default.createElement(
'div',
_extends({ style: _extends({}, newStyle, style) }, props),
content
);
}
);
}
return _react2.default.createElement(
_reactMotion.Motion,var horizontalPadding = _theme2['default'].container.gutter.horizontal;
var springConfig = { stiffness: 300, damping: 30 };
var swipeDeltaX = props.deltaX;
var motionStyle = { deltaX: (0, _reactMotion.spring)(-currentImage * window.innerWidth - horizontalPadding + swipeDeltaX, springConfig) };
return _react2['default'].createElement(
_reactSwipeable2['default'],
{
className: (0, _aphroditeNoImportant.css)(classes.swipeable),
onSwiped: onStopSwiping,
onSwiping: onSwiping,
preventDefaultTouchmoveEvent: true,
stopPropagation: true
},
_react2['default'].createElement(
_reactMotion.Motion,
{ style: motionStyle },
function (_ref) {
var deltaX = _ref.deltaX;
return _react2['default'].createElement(
'div',
{
className: (0, _aphroditeNoImportant.css)(classes.swipeContainer),
style: {
width: window.innerWidth * images.length,
transform: 'translate(' + deltaX + 'px, 0)',
WebkitTransform: 'translate(' + deltaX + 'px, 0)'
}
},
images.map(function (image, index) {
return _react2['default'].createElement(_ImageContainer2['default'], _extends({
key: index,var React = require('react');
var ReactLiberty = require('../../src/index');
var Motion = require('react-motion').Motion;
var spring = require('react-motion').spring;
var PLACEHOLDER = require('../assets/images/placeholder.png');
var HIGHLIGHT = require('../assets/images/app-highlight.png');
var FocusManager = require('sunbeam').FocusManager;
var Focusable = require('sunbeam').Focusable;
class AppAssetHighlight extends React.Component {
render(){
var style = {
width: 180,
height: 238,
position: 'absolute',
opacity: 0.001
};return children.map(function (child, i) {
var springPosition = (0, _reactMotion.spring)(_this6.getItemPositionByIndex(order.indexOf(i)), springConfig);
var style = lastPressed === i && isPressed ? {
scale: disableEffect ? 1 : (0, _reactMotion.spring)(1.05, springConfig),
shadow: disableEffect ? 0 : (0, _reactMotion.spring)(16, springConfig),
x: _this6.isHorizontal() ? mouse : 0,
y: !_this6.isHorizontal() ? mouse : 0
} : {
scale: disableEffect ? 1 : (0, _reactMotion.spring)(1, springConfig),
shadow: disableEffect ? 0 : (0, _reactMotion.spring)(0, springConfig),
x: _this6.isHorizontal() ? springPosition : 0,
y: !_this6.isHorizontal() ? springPosition : 0
};
return _react2.default.createElement(
_reactMotion.Motion,
{ style: style, key: child.props.id },
function (_ref3) {
var scale = _ref3.scale,
shadow = _ref3.shadow,
x = _ref3.x,
y = _ref3.y;
var onResize = _this6.onResize.bind(_this6, i);
var onMouseDown = isSortable ? _this6.handleMouseDown.bind(_this6, i, x, y) : function () {
return null;
};
var onTouchStart = _this6.handleTouchStart.bind(_this6, i, x, y);
var onResizeStart = _this6.handleResizeStart.bind(_this6, i);
var onResizeStop = _this6.handleResizeStop.bind(_this6, i);
var userSelect = isPressed || isResizing ? {
userSelect: 'none',arcStyles.map(function (config) {
return _react2.default.createElement(
_reactMotion.Motion,
{
defaultStyle: _extends({}, config.style, {
endAngle: config.data.startAngle
}),
key: config.key,
style: _extends({}, config.style, {
startAngle: (0, _reactMotion.spring)(config.style.startAngle),
endAngle: (0, _reactMotion.spring)(config.style.endAngle)
})
},
function (arcStyle) {
return _react2.default.createElement('path', {
d: createArc(arcStyle),
style: style(config.data.value, config.data.index),
onClick: function onClick(e) {
_onClick(e, config.data.value, config.data.index);'use strict';
var React = require('react');
var ReactLiberty = require('../../src/index');
var AppAsset = require('../components/app-asset.jsx');
var CategoryAsset = require('../components/category-asset.jsx');
var List = require('../components/list/list.jsx');
var Motion = require('react-motion').Motion;
var spring = require('react-motion').spring;
var appService = require('../services/applications-service');
var BackToTopButton = require('../components/back-to-top.jsx');
var FocusManager = require('sunbeam').FocusManager;
var Focusable = require('sunbeam').Focusable;
class AppStore extends React.Component {
goTop() {
this.refs.mainList.goTo(0);
FocusManager.setFocusTarget('section-navigation');
}
render() {
var styles = {
container: {overflow: 'hidden',
position: 'relative'
}, styles);
return _react2.default.createElement(
'div',
{
onWheel: this.onScrollStart,
ref: function ref(r) {
_this4.hScrollParent = r;
},
style: styles,
className: 'scroll-horizontal ' + (this.props.className || '')
},
_react2.default.createElement(
_reactMotion.Motion,
{ style: { z: (0, _reactMotion.spring)(this.state.animValues, springConfig) } },
function (_ref) {
var z = _ref.z;
var scrollingElementStyles = {
transform: 'translate3d(' + z + 'px, 0,0)',
display: 'inline-flex',
height: '100%',
position: 'absolute',
willChange: 'transform'
};
return _react2.default.createElement(
'div',
{ style: scrollingElementStyles },
_this4.props.children(z)var _props = this.props;
var tag = _props.tag;
var height = _props.height;
var rmConfig = _props.rmConfig;
var children = _props.children;
var publicProps = (0, _getPublicProps2['default'])(this.props, privateProps);
var rmHeight = height === 'auto' ? this.state.height : height;
var child = _react2['default'].createElement(
_reactMeasure2['default'],
{ whitelist: ['height'], onMeasure: this._handleMeasure },
_react.Children.only(children)
);
return _react2['default'].createElement(
_reactMotion.Motion,
{
defaultStyle: { _height: rmHeight },
style: {
_height: (0, _reactMotion.spring)(rmHeight, _extends({ precision: 0.5 }, rmConfig))
},
onRest: this._handleRest
},
function (_ref2) {
var _height = _ref2._height;
return (0, _react.createElement)(tag, _extends({}, publicProps, {
style: _extends({
height: _this2._heightReady ? _height : _this2._currHeight || 'auto'
}, publicProps.style)
}), child);
}
);Object.keys(data).map(function (k, index) {
var header = data[k][headerAttName];
var items = data[k][itemsAttName];
var isReactComponent = data[k].isReactComponent;
var isOpened = data[k].isOpened;
var height = data[k].height;
_refi++;
var headerRef = makeHeaderRef();
var itemRef = makeItemRef();
return _react2.default.createElement(
_reactMotion.Motion,
{
key: index,
defaultStyle: { h: 0 },
style: { h: (0, _reactMotion.spring)(isOpened ? height : 0) } },
function (_ref) {
var h = _ref.h;
return _react2.default.createElement(
'div',
{ key: k },
_react2.default.createElement(
'li',
null,
_react2.default.createElement(_ListHeader2.default, {
ref: headerRef,
header: header,
headerIndex: index,'use strict';
var React = require('react');
var ReactDOM = require('react-dom');
var ReactLiberty = require('../../../src/index');
var Motion = require('react-motion').Motion;
var spring = require('react-motion').spring;
var ChildrenItemsManager = require('./strategies/children-items-manager.jsx');
var DataItemsManager = require('./strategies/data-items-manager.jsx');
var FocusManager = require('sunbeam').FocusManager;
var FocusableContainer = require('sunbeam').FocusableContainer;
function invoke(fn) {
if (typeof this[fn] === 'function') {
this[fn]();
}
}
class List extends FocusableContainer {
static orientation = {
VERTICAL: 'vertical',react-motion
A spring that solves your animation problems.
