const bounceOut = ( duration = 1000, easing = 'cubic-bezier(0.215, 0.61, 0.355, 1)', iterations = 1, ) => { return { keyframes: [ {transform: 'scale3d(0.9, 0.9, 0.9)', offset: 0.2}, {opacity: 1, transform: 'scale3d(1.1, 1.1, 1.1)', offset: 0.55}, {opacity: 0, transform: 'scale3d(0.3, 0.3, 0.3)', offset: 1}, ], config: { duration, easing, iterations, }, }; }; const bounceOutDown = ( duration = 1000, easing = 'cubic-bezier(0.215, 0.61, 0.355, 1)', iterations = 1, ) => { return { keyframes: [ {transform: 'translate3d(0, 10px, 0) scaleY(0.985)', offset: 0.2}, {opacity: 1, transform: 'translate3d(0, -20px, 0) scaleY(0.9)', offset: 0.45}, {opacity: 0, transform: 'translate3d(0, 2000px, 0) scaleY(3)', offset: 1}, ], config: { duration, easing, iterations, }, }; }; const bounceOutLeft = ( duration = 1000, easing = 'cubic-bezier(0.215, 0.61, 0.355, 1)', iterations = 1, ) => { return { keyframes: [ {opacity: 1, transform: 'translate3d(20px, 0, 0) scaleX(0.9)', offset: 0.2}, {opacity: 0, transform: 'translate3d(-2000px, 0, 0) scaleX(2)', offset: 1}, ], config: { duration, easing, iterations, }, }; }; const bounceOutRight = ( duration = 1000, easing = 'cubic-bezier(0.215, 0.61, 0.355, 1)', iterations = 1, ) => { return { keyframes: [ {opacity: 1, transform: 'translate3d(-20px, 0, 0) scaleX(0.9)', offset: 0.2}, {opacity: 0, transform: 'translate3d(2000px, 0, 0) scaleX(2)', offset: 1}, ], config: { duration, easing, iterations, }, }; }; const bounceOutUp = ( duration = 1000, easing = 'cubic-bezier(0.215, 0.61, 0.355, 1)', iterations = 1, ) => { return { keyframes: [ {transform: 'translate3d(0, -10px, 0) scaleY(0.985)', offset: 0.2}, {opacity: 1, transform: 'translate3d(0, 20px, 0) scaleY(0.9)', offset: 0.4}, {opacity: 1, transform: 'translate3d(0, 20px, 0) scaleY(0.9)', offset: 0.45}, {opacity: 0, transform: 'translate3d(0, -2000px, 0) scaleY(3)', offset: 1}, ], config: { duration, easing, iterations, }, }; }; module.exports = { bounceOutDown, bounceOutLeft, bounceOutRight, bounceOutUp, };