add animation presets

src/shared/components/animations/animation-props.ts

@@ -0,0 +1,298 @@
+import type { MotionProps } from 'motion/react';
+
+const fadeIn: MotionProps = {
+    animate: 'show',
+    exit: 'hidden',
+    initial: 'hidden',
+    transition: { duration: 0.3 },
+    variants: {
+        hidden: { opacity: 0 },
+        show: { opacity: 1 },
+    },
+};
+
+const fadeOut: MotionProps = {
+    animate: 'hidden',
+    exit: 'show',
+    initial: 'show',
+    transition: { duration: 0.3 },
+    variants: {
+        hidden: { opacity: 0 },
+        show: { opacity: 1 },
+    },
+};
+
+const slideInLeft: MotionProps = {
+    animate: 'show',
+    exit: 'hidden',
+    initial: 'initial',
+    transition: { duration: 0.3 },
+    variants: {
+        hidden: { x: -100 },
+        initial: { x: -100 },
+        show: { x: 0 },
+    },
+};
+
+const slideOutLeft: MotionProps = {
+    animate: 'hidden',
+    exit: 'show',
+    initial: 'initial',
+    transition: { duration: 0.3 },
+    variants: {
+        hidden: { x: -100 },
+        initial: { x: 0 },
+        show: { x: 0 },
+    },
+};
+
+const slideInRight: MotionProps = {
+    animate: 'show',
+    exit: 'hidden',
+    initial: 'initial',
+    transition: { duration: 0.3 },
+    variants: {
+        hidden: { x: 100 },
+        initial: { x: 100 },
+        show: { x: 0 },
+    },
+};
+
+const slideOutRight: MotionProps = {
+    animate: 'hidden',
+    exit: 'show',
+    initial: 'show',
+    transition: { duration: 0.3 },
+    variants: {
+        hidden: { x: 100 },
+        initial: { x: 0 },
+        show: { x: 0 },
+    },
+};
+
+const slideInUp: MotionProps = {
+    animate: 'show',
+    exit: 'hidden',
+    initial: 'hidden',
+    transition: { duration: 0.3 },
+    variants: {
+        hidden: { y: 100 },
+        show: { y: 0 },
+    },
+};
+
+const slideOutUp: MotionProps = {
+    animate: 'hidden',
+    exit: 'show',
+    initial: 'initial',
+    transition: { duration: 0.3 },
+    variants: {
+        hidden: { y: 100 },
+        initial: { y: 0 },
+        show: { y: 0 },
+    },
+};
+
+const slideInDown: MotionProps = {
+    animate: 'show',
+    exit: 'hidden',
+    initial: 'initial',
+    transition: { duration: 0.3 },
+    variants: {
+        hidden: { y: -100 },
+        initial: { y: -100 },
+        show: { y: 0 },
+    },
+};
+
+const slideOutDown: MotionProps = {
+    animate: 'hidden',
+    exit: 'show',
+    initial: 'show',
+    transition: { duration: 0.3 },
+    variants: {
+        hidden: { y: -10 },
+        show: { y: 0 },
+    },
+};
+
+const scale: MotionProps = {
+    animate: { scale: 1 },
+    exit: 'hidden',
+    initial: 'hidden',
+    transition: { duration: 0.3 },
+    variants: {
+        hidden: { scale: 0 },
+        show: { scale: 1 },
+    },
+};
+
+const rotate: MotionProps = {
+    animate: 'show',
+    exit: 'hidden',
+    initial: 'hidden',
+    transition: { duration: 0.3 },
+    variants: {
+        hidden: { rotate: 0 },
+        show: { rotate: 360 },
+    },
+};
+
+const bounce: MotionProps = {
+    animate: 'show',
+    exit: 'hidden',
+    initial: 'hidden',
+    transition: { duration: 0.3, times: [0, 0.5, 1] },
+    variants: {
+        hidden: { y: [0, -30, 0] },
+        show: { y: 0 },
+    },
+};
+
+const pulse: MotionProps = {
+    animate: 'show',
+    exit: 'hidden',
+    initial: 'hidden',
+    transition: { duration: 1, repeat: Infinity },
+    variants: {
+        hidden: { scale: [1, 1.1, 1] },
+        show: { scale: 1 },
+    },
+};
+
+const shake: MotionProps = {
+    animate: 'show',
+    exit: 'hidden',
+    initial: 'hidden',
+    transition: { duration: 0.3 },
+    variants: {
+        hidden: { x: [-10, 10, -10, 10, 0] },
+        show: { x: 0 },
+    },
+};
+
+const flip: MotionProps = {
+    animate: 'show',
+    exit: 'hidden',
+    initial: 'hidden',
+    transition: { duration: 0.3 },
+    variants: {
+        hidden: { rotateY: 0 },
+        show: { rotateY: 360 },
+    },
+};
+
+const zoomIn: MotionProps = {
+    animate: 'show',
+    exit: 'hidden',
+    initial: 'hidden',
+    transition: { duration: 0.3 },
+    variants: {
+        hidden: { opacity: 0, scale: 0.5 },
+        show: { opacity: 1, scale: 1 },
+    },
+};
+
+const zoomOut: MotionProps = {
+    animate: { opacity: 0, scale: 0.5 },
+    exit: 'hidden',
+    initial: 'hidden',
+    transition: { duration: 0.3 },
+    variants: {
+        hidden: { opacity: 0, scale: 0.5 },
+        show: { opacity: 1, scale: 1 },
+    },
+};
+
+const rotateIn: MotionProps = {
+    animate: 'show',
+    exit: 'hidden',
+    initial: 'hidden',
+    transition: { duration: 0.3 },
+    variants: {
+        hidden: { opacity: 0, rotate: -180 },
+        show: { opacity: 1, rotate: 0 },
+    },
+};
+
+const swing: MotionProps = {
+    animate: 'show',
+    exit: 'hidden',
+    initial: 'hidden',
+    transition: { duration: 1, repeat: Infinity },
+    variants: {
+        hidden: { rotate: [0, 15, -15, 0] },
+        show: { rotate: 0 },
+    },
+};
+
+const rubberBand: MotionProps = {
+    animate: 'show',
+    exit: 'hidden',
+    initial: 'hidden',
+    transition: { duration: 0.8 },
+    variants: {
+        hidden: { scaleX: [1, 1.25, 0.75, 1.15, 0.95, 1] },
+        show: { scaleX: 1 },
+    },
+};
+
+const fadeInUp: MotionProps = {
+    animate: 'show',
+    exit: 'hidden',
+    initial: 'hidden',
+    transition: { duration: 0.3 },
+    variants: {
+        hidden: { opacity: 0, y: 50 },
+        show: { opacity: 1, y: 0 },
+    },
+};
+
+const fadeInDown: MotionProps = {
+    animate: 'show',
+    exit: 'hidden',
+    initial: 'hidden',
+    transition: { duration: 0.3 },
+    variants: {
+        hidden: { opacity: 0, y: -50 },
+        show: { opacity: 1, y: 0 },
+    },
+};
+
+const rotateScale: MotionProps = {
+    animate: 'show',
+    exit: 'hidden',
+    initial: 'hidden',
+    transition: { duration: 0.7 },
+    variants: {
+        hidden: { rotate: 0, scale: 1 },
+        show: { rotate: 360, scale: 1.5 },
+    },
+};
+
+export const animationProps = {
+    bounce,
+    fadeIn,
+    fadeInDown,
+    fadeInUp,
+    fadeOut,
+    flip,
+    pulse,
+    rotate,
+    rotateIn,
+    rotateScale,
+    rubberBand,
+    scale,
+    shake,
+    slideInDown,
+    slideInLeft,
+    slideInRight,
+    slideInUp,
+    slideOutDown,
+    slideOutLeft,
+    slideOutRight,
+    slideOutUp,
+    swing,
+    zoomIn,
+    zoomOut,
+};

src/shared/components/animations/animation-variants.ts

@@ -0,0 +1,116 @@
+import type { Variants } from 'motion/react';
+
+import merge from 'lodash/merge';
+
+const fadeIn: Variants = {
+    hidden: { opacity: 0 },
+    show: { opacity: 1 },
+};
+
+const fadeInUp: Variants = {
+    hidden: { opacity: 0, y: 10 },
+    show: { opacity: 1, y: 0 },
+};
+
+const fadeInDown: Variants = {
+    hidden: { opacity: 0, y: -10 },
+    show: { opacity: 1, y: 0 },
+};
+
+const fadeInLeft: Variants = {
+    hidden: { opacity: 0, x: 10 },
+    show: { opacity: 1, x: 0 },
+};
+
+const fadeInRight: Variants = {
+    hidden: { opacity: 0, x: -10 },
+    show: { opacity: 1, x: 0 },
+};
+
+const zoomIn: Variants = {
+    hidden: { scale: 0.5 },
+    show: { scale: 1 },
+};
+
+const zoomOut: Variants = {
+    hidden: { scale: 1 },
+    show: { scale: 0.5 },
+};
+
+const slideInUp: Variants = {
+    hidden: { y: 10 },
+    show: { y: 0 },
+};
+
+const slideInDown: Variants = {
+    hidden: { y: -10 },
+    show: { y: 0 },
+};
+
+const slideInLeft: Variants = {
+    hidden: { x: 10 },
+    show: { x: 0 },
+};
+
+const slideInRight: Variants = {
+    hidden: { x: 10 },
+    show: { x: 0 },
+};
+
+const scaleY: Variants = {
+    hidden: { height: 0, opacity: 0, overflow: 'hidden' },
+    show: { height: 'auto', opacity: 1 },
+};
+
+const blurIn: Variants = {
+    hidden: { filter: 'blur(4px)' },
+    show: { filter: 'blur(0px)' },
+};
+
+const flipHorizontal: Variants = {
+    hidden: { x: '-100%' },
+    show: { x: 0 },
+};
+
+const flipVertical: Variants = {
+    hidden: { y: '-100%' },
+    show: { y: 0 },
+};
+
+function combine(...variants: Variants[]) {
+    const merged = merge({}, ...variants);
+
+    return merged as Variants;
+}
+
+function stagger(variants: Variants, delay?: number): Variants {
+    return {
+        ...variants,
+        show: {
+            ...variants.show,
+            transition: {
+                staggerChildren: delay ?? 0.1,
+            },
+        },
+    };
+}
+
+export const animationVariants = {
+    blurIn,
+    combine,
+    fadeIn,
+    fadeInDown,
+    fadeInLeft,
+    fadeInRight,
+    fadeInUp,
+    flipHorizontal,
+    flipVertical,
+    scaleY,
+    slideInDown,
+    slideInLeft,
+    slideInRight,
+    slideInUp,
+    stagger,
+    zoomIn,
+    zoomOut,
+};