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; }