react-vegas
Version:
Vegas.js for React
106 lines (105 loc) • 3.5 kB
JavaScript
import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
const useAnimationVariants = (transitionDuration)=>{
const variants = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>({
fade: (custom)=>({
enter: {
opacity: 1,
transition: {
duration: custom.duration
}
},
exit: {
opacity: 0,
transition: {
duration: transitionDuration / 1000
}
}
}),
slideLeft: (custom)=>({
enter: {
x: 0,
opacity: 1,
transition: {
duration: custom.duration
}
},
exit: {
x: "-100%",
opacity: 0,
transition: {
duration: transitionDuration / 1000
}
}
}),
slideRight: (custom)=>({
enter: {
x: 0,
opacity: 1,
transition: {
duration: custom.duration
}
},
exit: {
x: "100%",
opacity: 0,
transition: {
duration: transitionDuration / 1000
}
}
}),
zoomIn: (custom)=>({
enter: {
scale: 1,
opacity: 1,
transition: {
duration: custom.duration
}
},
exit: {
scale: 0.5,
opacity: 0,
transition: {
duration: transitionDuration / 1000
}
}
}),
zoomOut: (custom)=>({
enter: {
scale: 1,
opacity: 1,
transition: {
duration: custom.duration
}
},
exit: {
scale: 1.25,
opacity: 0,
transition: {
duration: transitionDuration / 1000
}
}
}),
zoomInOut: (custom)=>({
enter: {
scale: 1.25,
opacity: 1,
transition: {
duration: custom.duration
}
},
exit: {
scale: 1,
opacity: 0,
transition: {
duration: transitionDuration / 1000
}
}
})
}), [
transitionDuration
]);
return {
variants
};
};
export { useAnimationVariants };