diff --git a/src/app/preset/presets/block-presets.ts b/src/app/preset/presets/block-presets.ts
index 04096d6..2977de1 100644
--- a/src/app/preset/presets/block-presets.ts
+++ b/src/app/preset/presets/block-presets.ts
@@ -21,4 +21,17 @@ export const blockPreset = [
opacity: 1,
},
},
+ {
+ name: "bounce",
+ description: "bounce like button",
+ from: {
+ scale: 0.8,
+ },
+ to: {
+ scale: 1,
+ },
+ rest: {
+ ease: "bounce",
+ },
+ },
] as const;
diff --git a/src/app/preset/presets/blocks-presets.ts b/src/app/preset/presets/blocks-presets.ts
index e4c9576..3286696 100644
--- a/src/app/preset/presets/blocks-presets.ts
+++ b/src/app/preset/presets/blocks-presets.ts
@@ -12,4 +12,35 @@ export const blocksPreset = [
stagger: 0.1,
},
},
+ {
+ name: "move from x",
+ description: "a zoom entry block",
+ from: {
+ x: 0,
+ },
+ to: {
+ x: 300,
+ },
+ rest: {
+ ease: "back",
+ stagger: 0.1,
+ },
+ },
+ {
+ name: "move from x",
+ description: "a zoom entry block",
+ width: 100,
+ height: 30,
+ from: {
+ x: 0,
+ opacity: 0,
+ },
+ to: {
+ x: 300,
+ opacity: 1,
+ },
+ rest: {
+ stagger: 0.1,
+ },
+ },
] as const;
diff --git a/src/components/preset-page/MotionBlock.tsx b/src/components/preset-page/MotionBlock.tsx
index 53ab726..64772fe 100644
--- a/src/components/preset-page/MotionBlock.tsx
+++ b/src/components/preset-page/MotionBlock.tsx
@@ -70,6 +70,38 @@ function MotionBlock({
};
}, [isHover, motion, type]);
+ const CustomBlock = () => {
+ if (type === "text") {
+ return {motion.description};
+ } else if (type === "block") {
+ if (motion.width && motion.height) {
+ return (
+
+ );
+ }
+ return ;
+ } else if (type === "blocks") {
+ if (motion.width && motion.height) {
+ return (
+
+ );
+ }
+ return ;
+ }
+ return <>>;
+ };
+
return (
setIsHover(true)}
@@ -77,14 +109,19 @@ function MotionBlock({
onClick={onClick}
isClicked={isClicked}
>
- {type === "text" && {motion.description}}
- {type === "block" && }
+ {(type === "text" || type === "block") && }
{type === "blocks" && (
-
-
-
-
+ {motion.count !== undefined ? (
+ [...Array(motion.count)].map((_, i) => )
+ ) : (
+ <>
+
+
+
+
+ >
+ )}
)}
diff --git a/src/types/presetTypes.ts b/src/types/presetTypes.ts
index 00bd726..676f415 100644
--- a/src/types/presetTypes.ts
+++ b/src/types/presetTypes.ts
@@ -5,4 +5,7 @@ export interface PresetType {
from?: any;
to?: any;
rest?: any;
+ width?: number;
+ height?: number;
+ count?: number;
}