How to use the react-motion/lib/spring 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.
MCS-Lite / mcs-lite / packages / mcs-lite-ui / src / LandingHeader / NavItemBurger.js View on Github 
return (
{children && {children}}
{isShow ? : }
{/* Portal */}
{isShow && (
{items.map(e => )}
)}
);
}
}atLeave: {
opacity: spring(0, fadeConfig),
},
atActive: {
opacity: spring(1, fadeConfig),
},
};
const pop = {
atEnter: {
scale: 0.8,
opacity: 0,
},
atLeave: {
scale: spring(0.8, popConfig),
opacity: spring(0, popConfig),
},
atActive: {
scale: spring(1, popConfig),
opacity: 1,
},
mapStyles(styles) {
return {
opacity: styles.opacity,
transform: `scale(${styles.scale})`,
};
},
};
const slideLeft = {
atEnter: {
opacity: 0,atActive: {
opacity: spring(1, fadeConfig),
},
};
const pop = {
atEnter: {
scale: 0.8,
opacity: 0,
},
atLeave: {
scale: spring(0.8, popConfig),
opacity: spring(0, popConfig),
},
atActive: {
scale: spring(1, popConfig),
opacity: 1,
},
mapStyles(styles) {
return {
opacity: styles.opacity,
transform: `scale(${styles.scale})`,
};
},
};
const slideLeft = {
atEnter: {
opacity: 0,
offset: 100,
},
atLeave: {import spring from 'react-motion/lib/spring';
const fadeConfig = { stiffness: 200, damping: 22 };
const popConfig = { stiffness: 360, damping: 25 };
const slideConfig = { stiffness: 330, damping: 30 };
const fade = {
atEnter: {
opacity: 0,
},
atLeave: {
opacity: spring(0, fadeConfig),
},
atActive: {
opacity: spring(1, fadeConfig),
},
};
const pop = {
atEnter: {
scale: 0.8,
opacity: 0,
},
atLeave: {
scale: spring(0.8, popConfig),
opacity: spring(0, popConfig),
},
atActive: {
scale: spring(1, popConfig),
opacity: 1,
},function ensureSpring(styles) {
const obj = {};
for (var key in styles) {
const value = styles[key];
if (typeof value === 'number') {
obj[key] = spring(value);
} else {
obj[key] = value;
}
}
return obj;
}},
mapStyles(styles) {
return {
opacity: styles.opacity,
transform: `translateX(${styles.offset}%)`,
};
},
};
const slideRight = {
atEnter: {
opacity: 0,
offset: -100,
},
atLeave: {
opacity: spring(0, fadeConfig),
offset: spring(100, slideConfig),
},
atActive: {
opacity: spring(1, slideConfig),
offset: spring(0, slideConfig),
},
mapStyles(styles) {
return {
opacity: styles.opacity,
transform: `translateX(${styles.offset}%)`,
};
},
};
export default { fade, pop, slideLeft, slideRight };transform: `scale(${styles.scale})`,
};
},
};
const slideLeft = {
atEnter: {
opacity: 0,
offset: 100,
},
atLeave: {
opacity: spring(0, fadeConfig),
offset: spring(-100, slideConfig),
},
atActive: {
opacity: spring(1, slideConfig),
offset: spring(0, slideConfig),
},
mapStyles(styles) {
return {
opacity: styles.opacity,
transform: `translateX(${styles.offset}%)`,
};
},
};
const slideRight = {
atEnter: {
opacity: 0,
offset: -100,
},
atLeave: {mapStyles(styles) {
return {
opacity: styles.opacity,
transform: `translateX(${styles.offset}%)`,
};
},
};
const slideRight = {
atEnter: {
opacity: 0,
offset: -100,
},
atLeave: {
opacity: spring(0, fadeConfig),
offset: spring(100, slideConfig),
},
atActive: {
opacity: spring(1, slideConfig),
offset: spring(0, slideConfig),
},
mapStyles(styles) {
return {
opacity: styles.opacity,
transform: `translateX(${styles.offset}%)`,
};
},
};
export default { fade, pop, slideLeft, slideRight };react-motion
A spring that solves your animation problems.
