@m4l/components 0.1.35 → 0.1.37

package/src/components/animate/variants/background.ts

@@ -0,0 +1,106 @@
+// @types
+import { BackgroundType } from '../type';
+
+// ----------------------------------------------------------------------
+
+export const varBgColor = (props?: BackgroundType) => {
+    const colors = props?.colors || ['#19dcea', '#b22cff'];
+    const duration = props?.duration || 5;
+    const ease = props?.ease || 'linear';
+
+    return {
+        animate: {
+            background: colors,
+            transition: { duration, ease },
+        },
+    };
+};
+
+// ----------------------------------------------------------------------
+
+export const varBgKenburns = (props?: BackgroundType) => {
+    const duration = props?.duration || 5;
+    const ease = props?.ease || 'easeOut';
+
+    return {
+        top: {
+            animate: {
+                scale: [1, 1.25],
+                y: [0, -15],
+                transformOrigin: ['50% 16%', 'top'],
+                transition: { duration, ease },
+            },
+        },
+        right: {
+            animate: {
+                scale: [1, 1.25],
+                x: [0, 20],
+                y: [0, -15],
+                transformOrigin: ['84% 50%', 'right'],
+                transition: { duration, ease },
+            },
+        },
+        bottom: {
+            animate: {
+                scale: [1, 1.25],
+                y: [0, 15],
+                transformOrigin: ['50% 84%', 'bottom'],
+                transition: { duration, ease },
+            },
+        },
+        left: {
+            animate: {
+                scale: [1, 1.25],
+                x: [0, -20],
+                y: [0, 15],
+                transformOrigin: ['16% 50%', 'left'],
+                transition: { duration, ease },
+            },
+        },
+    };
+};
+
+// ----------------------------------------------------------------------
+
+export const varBgPan = (props?: BackgroundType) => {
+    const colors = props?.colors || ['#ee7752', '#e73c7e', '#23a6d5', '#23d5ab'];
+    const duration = props?.duration || 5;
+    const ease = props?.ease || 'linear';
+
+    const gradient = (deg: number) => `linear-gradient(${deg}deg, ${colors})`;
+
+    return {
+        top: {
+            animate: {
+                backgroundImage: [gradient(0), gradient(0)],
+                backgroundPosition: ['center 99%', 'center 1%'],
+                backgroundSize: ['100% 600%', '100% 600%'],
+                transition: { duration, ease },
+            },
+        },
+        right: {
+            animate: {
+                backgroundPosition: ['1% center', '99% center'],
+                backgroundImage: [gradient(270), gradient(270)],
+                backgroundSize: ['600% 100%', '600% 100%'],
+                transition: { duration, ease },
+            },
+        },
+        bottom: {
+            animate: {
+                backgroundImage: [gradient(0), gradient(0)],
+                backgroundPosition: ['center 1%', 'center 99%'],
+                backgroundSize: ['100% 600%', '100% 600%'],
+                transition: { duration, ease },
+            },
+        },
+        left: {
+            animate: {
+                backgroundPosition: ['99% center', '1% center'],
+                backgroundImage: [gradient(270), gradient(270)],
+                backgroundSize: ['600% 100%', '600% 100%'],
+                transition: { duration, ease },
+            },
+        },
+    };
+};

package/src/components/animate/variants/bounce.ts

@@ -0,0 +1,106 @@
+// @types
+import { VariantsType } from '../type';
+//
+import { varTranEnter, varTranExit } from './transition';
+
+// ----------------------------------------------------------------------
+
+export const varBounce = (props?: VariantsType) => {
+    const durationIn = props?.durationIn;
+    const durationOut = props?.durationOut;
+    const easeIn = props?.easeIn;
+    const easeOut = props?.easeOut;
+
+    return {
+        // IN
+        in: {
+            initial: {},
+            animate: {
+                scale: [0.3, 1.1, 0.9, 1.03, 0.97, 1],
+                opacity: [0, 1, 1, 1, 1, 1],
+                transition: varTranEnter({ durationIn, easeIn }),
+            },
+            exit: {
+                scale: [0.9, 1.1, 0.3],
+                opacity: [1, 1, 0],
+            },
+        },
+        inUp: {
+            initial: {},
+            animate: {
+                y: [720, -24, 12, -4, 0],
+                scaleY: [4, 0.9, 0.95, 0.985, 1],
+                opacity: [0, 1, 1, 1, 1],
+                transition: { ...varTranEnter({ durationIn, easeIn }) },
+            },
+            exit: {
+                y: [12, -24, 720],
+                scaleY: [0.985, 0.9, 3],
+                opacity: [1, 1, 0],
+                transition: varTranExit({ durationOut, easeOut }),
+            },
+        },
+        inDown: {
+            initial: {},
+            animate: {
+                y: [-720, 24, -12, 4, 0],
+                scaleY: [4, 0.9, 0.95, 0.985, 1],
+                opacity: [0, 1, 1, 1, 1],
+                transition: varTranEnter({ durationIn, easeIn }),
+            },
+            exit: {
+                y: [-12, 24, -720],
+                scaleY: [0.985, 0.9, 3],
+                opacity: [1, 1, 0],
+                transition: varTranExit({ durationOut, easeOut }),
+            },
+        },
+        inLeft: {
+            initial: {},
+            animate: {
+                x: [-720, 24, -12, 4, 0],
+                scaleX: [3, 1, 0.98, 0.995, 1],
+                opacity: [0, 1, 1, 1, 1],
+                transition: varTranEnter({ durationIn, easeIn }),
+            },
+            exit: {
+                x: [0, 24, -720],
+                scaleX: [1, 0.9, 2],
+                opacity: [1, 1, 0],
+                transition: varTranExit({ durationOut, easeOut }),
+            },
+        },
+        inRight: {
+            initial: {},
+            animate: {
+                x: [720, -24, 12, -4, 0],
+                scaleX: [3, 1, 0.98, 0.995, 1],
+                opacity: [0, 1, 1, 1, 1],
+                transition: varTranEnter({ durationIn, easeIn }),
+            },
+            exit: {
+                x: [0, -24, 720],
+                scaleX: [1, 0.9, 2],
+                opacity: [1, 1, 0],
+                transition: varTranExit({ durationOut, easeOut }),
+            },
+        },
+
+        // OUT
+        out: {
+            animate: { scale: [0.9, 1.1, 0.3], opacity: [1, 1, 0] },
+        },
+        outUp: {
+            animate: { y: [-12, 24, -720], scaleY: [0.985, 0.9, 3], opacity: [1, 1, 0] },
+        },
+        outDown: {
+            animate: { y: [12, -24, 720], scaleY: [0.985, 0.9, 3], opacity: [1, 1, 0] },
+        },
+        outLeft: {
+            animate: { x: [0, 24, -720], scaleX: [1, 0.9, 2], opacity: [1, 1, 0] },
+        },
+        outRight: {
+            animate: { x: [0, -24, 720], scaleX: [1, 0.9, 2], opacity: [1, 1, 0] },
+        },
+    };
+};

package/src/components/animate/variants/container.ts

@@ -0,0 +1,28 @@
+// ----------------------------------------------------------------------
+
+export type Props = {
+    staggerIn?: number;
+    delayIn?: number;
+    staggerOut?: number;
+};
+
+export const varContainer = (props?: Props) => {
+    const staggerIn = props?.staggerIn || 0.05;
+    const delayIn = props?.staggerIn || 0.05;
+    const staggerOut = props?.staggerIn || 0.05;
+
+    return {
+        animate: {
+            transition: {
+                staggerChildren: staggerIn,
+                delayChildren: delayIn,
+            },
+        },
+        exit: {
+            transition: {
+                staggerChildren: staggerOut,
+                staggerDirection: -1,
+            },
+        },
+    };
+};

package/src/components/animate/variants/fade.ts

@@ -0,0 +1,70 @@
+// @types
+import { VariantsType } from '../type';
+//
+import { varTranEnter, varTranExit } from './transition';
+
+// ----------------------------------------------------------------------
+
+export const varFade = (props?: VariantsType) => {
+    const distance = props?.distance || 120;
+    const durationIn = props?.durationIn;
+    const durationOut = props?.durationOut;
+    const easeIn = props?.easeIn;
+    const easeOut = props?.easeOut;
+
+    return {
+        // IN
+        in: {
+            initial: { opacity: 0 },
+            animate: { opacity: 1, transition: varTranEnter },
+            exit: { opacity: 0, transition: varTranExit },
+        },
+        inUp: {
+            initial: { y: distance, opacity: 0 },
+            animate: { y: 0, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
+            exit: { y: distance, opacity: 0, transition: varTranExit({ durationOut, easeOut }) },
+        },
+        inDown: {
+            initial: { y: -distance, opacity: 0 },
+            animate: { y: 0, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
+            exit: { y: -distance, opacity: 0, transition: varTranExit({ durationOut, easeOut }) },
+        },
+        inLeft: {
+            initial: { x: -distance, opacity: 0 },
+            animate: { x: 0, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
+            exit: { x: -distance, opacity: 0, transition: varTranExit({ durationOut, easeOut }) },
+        },
+        inRight: {
+            initial: { x: distance, opacity: 0 },
+            animate: { x: 0, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
+            exit: { x: distance, opacity: 0, transition: varTranExit({ durationOut, easeOut }) },
+        },
+
+        // OUT
+        out: {
+            initial: { opacity: 1 },
+            animate: { opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
+            exit: { opacity: 1, transition: varTranExit({ durationOut, easeOut }) },
+        },
+        outUp: {
+            initial: { y: 0, opacity: 1 },
+            animate: { y: -distance, opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
+            exit: { y: 0, opacity: 1, transition: varTranExit({ durationOut, easeOut }) },
+        },
+        outDown: {
+            initial: { y: 0, opacity: 1 },
+            animate: { y: distance, opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
+            exit: { y: 0, opacity: 1, transition: varTranExit({ durationOut, easeOut }) },
+        },
+        outLeft: {
+            initial: { x: 0, opacity: 1 },
+            animate: { x: -distance, opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
+            exit: { x: 0, opacity: 1, transition: varTranExit({ durationOut, easeOut }) },
+        },
+        outRight: {
+            initial: { x: 0, opacity: 1 },
+            animate: { x: distance, opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
+            exit: { x: 0, opacity: 1, transition: varTranExit({ durationOut, easeOut }) },
+        },
+    };
+};

package/src/components/animate/variants/flip.ts

@@ -0,0 +1,37 @@
+// @types
+import { VariantsType } from '../type';
+//
+import { varTranEnter, varTranExit } from './transition';
+
+// ----------------------------------------------------------------------
+
+export const varFlip = (props?: VariantsType) => {
+    const durationIn = props?.durationIn;
+    const durationOut = props?.durationOut;
+    const easeIn = props?.easeIn;
+    const easeOut = props?.easeOut;
+
+    return {
+        // IN
+        inX: {
+            initial: { rotateX: -180, opacity: 0 },
+            animate: { rotateX: 0, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
+            exit: { rotateX: -180, opacity: 0, transition: varTranExit({ durationOut, easeOut }) },
+        },
+        inY: {
+            initial: { rotateY: -180, opacity: 0 },
+            animate: { rotateY: 0, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
+            exit: { rotateY: -180, opacity: 0, transition: varTranExit({ durationOut, easeOut }) },
+        },
+
+        // OUT
+        outX: {
+            initial: { rotateX: 0, opacity: 1 },
+            animate: { rotateX: 70, opacity: 0, transition: varTranExit({ durationOut, easeOut }) },
+        },
+        outY: {
+            initial: { rotateY: 0, opacity: 1 },
+            animate: { rotateY: 70, opacity: 0, transition: varTranExit({ durationOut, easeOut }) },
+        },
+    };
+};

package/src/components/animate/variants/index.ts

@@ -0,0 +1,13 @@
+// export * from './path';
+export * from './fade';
+// export * from './zoom';
+// export * from './flip';
+// export * from './slide';
+// export * from './scale';
+export * from './bounce';
+// export * from './rotate';
+// export * from './actions';
+
+export * from './container';
+export * from './transition';
+// export * from './background';

package/src/components/animate/variants/path.ts

@@ -0,0 +1,14 @@
+// ----------------------------------------------------------------------
+
+export const TRANSITION = {
+    duration: 2,
+    ease: [0.43, 0.13, 0.23, 0.96],
+};
+
+export const varPath = {
+    animate: {
+        fillOpacity: [0, 0, 1],
+        pathLength: [1, 0.4, 0],
+        transition: TRANSITION,
+    },
+};

package/src/components/animate/variants/rotate.ts

@@ -0,0 +1,32 @@
+// @types
+import { VariantsType } from '../type';
+//
+import { varTranEnter, varTranExit } from './transition';
+
+// ----------------------------------------------------------------------
+
+export const varRotate = (props?: VariantsType) => {
+    const durationIn = props?.durationIn;
+    const durationOut = props?.durationOut;
+    const easeIn = props?.easeIn;
+    const easeOut = props?.easeOut;
+
+    return {
+        // IN
+        in: {
+            initial: { opacity: 0, rotate: -360 },
+            animate: { opacity: 1, rotate: 0, transition: varTranEnter({ durationIn, easeIn }) },
+            exit: { opacity: 0, rotate: -360, transition: varTranExit({ durationOut, easeOut }) },
+        },
+
+        // OUT
+        out: {
+            initial: { opacity: 1, rotate: 0 },
+            animate: {
+                opacity: 0,
+                rotate: -360,
+                transition: varTranExit({ durationOut, easeOut }),
+            },
+        },
+    };
+};

package/src/components/animate/variants/scale.ts

@@ -0,0 +1,37 @@
+// @types
+import { VariantsType } from '../type';
+//
+import { varTranEnter, varTranExit } from './transition';
+
+// ----------------------------------------------------------------------
+
+export const varScale = (props?: VariantsType) => {
+    const durationIn = props?.durationIn;
+    const durationOut = props?.durationOut;
+    const easeIn = props?.easeIn;
+    const easeOut = props?.easeOut;
+
+    return {
+        // IN
+        inX: {
+            initial: { scaleX: 0, opacity: 0 },
+            animate: { scaleX: 1, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
+            exit: { scaleX: 0, opacity: 0, transition: varTranExit({ durationOut, easeOut }) },
+        },
+        inY: {
+            initial: { scaleY: 0, opacity: 0 },
+            animate: { scaleY: 1, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
+            exit: { scaleY: 0, opacity: 0, transition: varTranExit({ durationOut, easeOut }) },
+        },
+
+        // OUT
+        outX: {
+            initial: { scaleX: 1, opacity: 1 },
+            animate: { scaleX: 0, opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
+        },
+        outY: {
+            initial: { scaleY: 1, opacity: 1 },
+            animate: { scaleY: 0, opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
+        },
+    };
+};

package/src/components/animate/variants/slide.ts

@@ -0,0 +1,60 @@
+// @types
+import { VariantsType } from '../type';
+//
+import { varTranEnter, varTranExit } from './transition';
+
+// ----------------------------------------------------------------------
+
+export const varSlide = (props?: VariantsType) => {
+    const distance = props?.distance || 160;
+    const durationIn = props?.durationIn;
+    const durationOut = props?.durationOut;
+    const easeIn = props?.easeIn;
+    const easeOut = props?.easeOut;
+
+    return {
+        // IN
+        inUp: {
+            initial: { y: distance },
+            animate: { y: 0, transition: varTranEnter({ durationIn, easeIn }) },
+            exit: { y: distance, transition: varTranExit({ durationOut, easeOut }) },
+        },
+        inDown: {
+            initial: { y: -distance },
+            animate: { y: 0, transition: varTranEnter({ durationIn, easeIn }) },
+            exit: { y: -distance, transition: varTranExit({ durationOut, easeOut }) },
+        },
+        inLeft: {
+            initial: { x: -distance },
+            animate: { x: 0, transition: varTranEnter({ durationIn, easeIn }) },
+            exit: { x: -distance, transition: varTranExit({ durationOut, easeOut }) },
+        },
+        inRight: {
+            initial: { x: distance },
+            animate: { x: 0, transition: varTranEnter({ durationIn, easeIn }) },
+            exit: { x: distance, transition: varTranExit({ durationOut, easeOut }) },
+        },
+
+        // OUT
+        outUp: {
+            initial: { y: 0 },
+            animate: { y: -distance, transition: varTranEnter({ durationIn, easeIn }) },
+            exit: { y: 0, transition: varTranExit({ durationOut, easeOut }) },
+        },
+        outDown: {
+            initial: { y: 0 },
+            animate: { y: distance, transition: varTranEnter({ durationIn, easeIn }) },
+            exit: { y: 0, transition: varTranExit({ durationOut, easeOut }) },
+        },
+        outLeft: {
+            initial: { x: 0 },
+            animate: { x: -distance, transition: varTranEnter({ durationIn, easeIn }) },
+            exit: { x: 0, transition: varTranExit({ durationOut, easeOut }) },
+        },
+        outRight: {
+            initial: { x: 0 },
+            animate: { x: distance, transition: varTranEnter({ durationIn, easeIn }) },
+            exit: { x: 0, transition: varTranExit({ durationOut, easeOut }) },
+        },
+    };
+};

package/src/components/animate/variants/transition.ts

@@ -0,0 +1,25 @@
+// @types
+import { TranHoverType, TranEnterType, TranExitType } from '../type';
+
+// ----------------------------------------------------------------------
+
+export const varTranHover = (props?: TranHoverType) => {
+    const duration = props?.duration || 0.32;
+    const ease = props?.ease || [0.43, 0.13, 0.23, 0.96];
+
+    return { duration, ease };
+};
+
+export const varTranEnter = (props?: TranEnterType) => {
+    const duration = props?.durationIn || 0.64;
+    const ease = props?.easeIn || [0.43, 0.13, 0.23, 0.96];
+
+    return { duration, ease };
+};
+
+export const varTranExit = (props?: TranExitType) => {
+    const duration = props?.durationOut || 0.48;
+    const ease = props?.easeOut || [0.43, 0.13, 0.23, 0.96];
+
+    return { duration, ease };
+};

package/src/components/animate/variants/zoom.ts

@@ -0,0 +1,125 @@
+// @types
+import { VariantsType } from '../type';
+//
+import { varTranEnter, varTranExit } from './transition';
+
+// ----------------------------------------------------------------------
+
+export const varZoom = (props?: VariantsType) => {
+    const distance = props?.distance || 720;
+    const durationIn = props?.durationIn;
+    const durationOut = props?.durationOut;
+    const easeIn = props?.easeIn;
+    const easeOut = props?.easeOut;
+
+    return {
+        // IN
+        in: {
+            initial: { scale: 0, opacity: 0 },
+            animate: { scale: 1, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
+            exit: { scale: 0, opacity: 0, transition: varTranExit({ durationOut, easeOut }) },
+        },
+        inUp: {
+            initial: { scale: 0, opacity: 0, translateY: distance },
+            animate: {
+                scale: 1,
+                opacity: 1,
+                translateY: 0,
+                transition: varTranEnter({ durationIn, easeIn }),
+            },
+            exit: {
+                scale: 0,
+                opacity: 0,
+                translateY: distance,
+                transition: varTranExit({ durationOut, easeOut }),
+            },
+        },
+        inDown: {
+            initial: { scale: 0, opacity: 0, translateY: -distance },
+            animate: {
+                scale: 1,
+                opacity: 1,
+                translateY: 0,
+                transition: varTranEnter({ durationIn, easeIn }),
+            },
+            exit: {
+                scale: 0,
+                opacity: 0,
+                translateY: -distance,
+                transition: varTranExit({ durationOut, easeOut }),
+            },
+        },
+        inLeft: {
+            initial: { scale: 0, opacity: 0, translateX: -distance },
+            animate: {
+                scale: 1,
+                opacity: 1,
+                translateX: 0,
+                transition: varTranEnter({ durationIn, easeIn }),
+            },
+            exit: {
+                scale: 0,
+                opacity: 0,
+                translateX: -distance,
+                transition: varTranExit({ durationOut, easeOut }),
+            },
+        },
+        inRight: {
+            initial: { scale: 0, opacity: 0, translateX: distance },
+            animate: {
+                scale: 1,
+                opacity: 1,
+                translateX: 0,
+                transition: varTranEnter({ durationIn, easeIn }),
+            },
+            exit: {
+                scale: 0,
+                opacity: 0,
+                translateX: distance,
+                transition: varTranExit({ durationOut, easeOut }),
+            },
+        },
+
+        // OUT
+        out: {
+            initial: { scale: 1, opacity: 1 },
+            animate: { scale: 0, opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
+        },
+        outUp: {
+            initial: { scale: 1, opacity: 1 },
+            animate: {
+                scale: 0,
+                opacity: 0,
+                translateY: -distance,
+                transition: varTranEnter({ durationIn, easeIn }),
+            },
+        },
+        outDown: {
+            initial: { scale: 1, opacity: 1 },
+            animate: {
+                scale: 0,
+                opacity: 0,
+                translateY: distance,
+                transition: varTranEnter({ durationIn, easeIn }),
+            },
+        },
+        outLeft: {
+            initial: { scale: 1, opacity: 1 },
+            animate: {
+                scale: 0,
+                opacity: 0,
+                translateX: -distance,
+                transition: varTranEnter({ durationIn, easeIn }),
+            },
+        },
+        outRight: {
+            initial: { scale: 1, opacity: 1 },
+            animate: {
+                scale: 0,
+                opacity: 0,
+                translateX: distance,
+                transition: varTranEnter({ durationIn, easeIn }),
+            },
+        },
+    };
+};