How to use the react-motion.presets.wobbly 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.
FormidableLabs / radium-constraints / test / client / spec / components / autodom.spec.jsx View on Github 
animatorProps: (layout) => ({
style: {
width: spring(layout.width, presets.wobbly),
height: spring(layout.height, presets.wobbly),
top: spring(layout.top, presets.wobbly),
right: spring(layout.right, presets.wobbly),
bottom: spring(layout.bottom, presets.wobbly),
left: spring(layout.left, presets.wobbly)
}
})
});animatorProps: (layout) => ({
style: {
width: spring(layout.width, presets.wobbly),
height: spring(layout.height, presets.wobbly),
top: spring(layout.top, presets.wobbly),
right: spring(layout.right, presets.wobbly),
bottom: spring(layout.bottom, presets.wobbly),
left: spring(layout.left, presets.wobbly)
}
})
});animatorProps: (layout) => ({
style: {
width: spring(layout.width, presets.wobbly),
height: spring(layout.height, presets.wobbly),
top: spring(layout.top, presets.wobbly),
right: spring(layout.right, presets.wobbly),
bottom: spring(layout.bottom, presets.wobbly),
left: spring(layout.left, presets.wobbly)
}
})
});animatorProps: (layout) => ({
style: {
width: spring(layout.width, presets.wobbly),
height: spring(layout.height, presets.wobbly),
top: spring(layout.top, presets.wobbly),
right: spring(layout.right, presets.wobbly),
bottom: spring(layout.bottom, presets.wobbly),
left: spring(layout.left, presets.wobbly)
}
})
});const pointsList = points.map((p, i) => {
if (withMotion) {
return (
{value => (
<div style="{{">
)}
)
}
const pointTransform = `translate(${p.x}px, ${p.y}px)`
return (
</div>const motionStyles = logs.map((msg, i) => ({
key: msg.timestamp.toString(),
data: msg,
style: {
x: spring(1.0, presets.wobbly)
}
}))animatorProps: (layout) => ({
style: {
width: spring(layout.width, presets.wobbly),
height: spring(layout.height, presets.wobbly),
top: spring(layout.top, presets.wobbly),
right: spring(layout.right, presets.wobbly),
bottom: spring(layout.bottom, presets.wobbly),
left: spring(layout.left, presets.wobbly)
}
})
});const p = points[0]
return (
{' <div>\n'}
{'
{'), y: spring('}
{')}}>\n'}
{v => (
<span>
{` <div style="transform: translate(`}
<DynamicCode.H text={v.x.toFixed(2) + 'px'} />
{`,`}
<DynamicCode.H text={v.y.toFixed(2) + 'px'} />
{`)">\n`}
)}
{' \n'}
{' ...\n'}
{' <div>'}</div></div></span></div>render() {
const style = {
translateY: this.props.moveUp ? spring(-150, presets.wobbly) : spring(0)
};
return (
{({translateY}) => (
)}
);getDefault() {
return {
blur: { val : 0, config: presets.noWobble},
opacity: { val : 1, config: presets.noWobble },
scale: { val : 1, config: presets.wobbly},
grayscale: { val : 0, config: presets.noWobble}
}
}react-motion
A spring that solves your animation problems.
