feat: adds config option for animations plugin to adjust transform scale

formkit · Jun 20, 2024 · 95ef08c · 95ef08c
1 parent 73b917f
commit 95ef08c
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 36 deletions.
diff --git a/src/plugins/animations/index.ts b/src/plugins/animations/index.ts
@@ -2,43 +2,42 @@ import type { SetupNodeData, Node } from "../../types";
 import type { AnimationsConfig } from "./types";
 import { state, parents } from "../../index";
 
-const slideUp = [
-  {
-    transform: "translateY(100%)",
-  },
-  {
-    transform: "translateY(0)",
-  },
-];
-
-const slideDown = [
-  {
-    transform: "translateY(-100%)",
-  },
-  {
-    transform: "translateY(0)",
-  },
-];
-
-const slideLeft = [
-  {
-    transform: "translateX(100%)",
-  },
-  {
-    transform: "translateX(0)",
-  },
-];
-
-const slideRight = [
-  {
-    transform: "translateX(-100%)",
-  },
-  {
-    transform: "translateX(0)",
-  },
-];
-
 export function animations(animationsConfig: Partial<AnimationsConfig> = {}) {
+  const slideUp = [
+    {
+      transform: `translateY(${animationsConfig.yScale || 50}%)`,
+    },
+    {
+      transform: `translateY(${animationsConfig.yScale || 0}%)`,
+    },
+  ];
+
+  const slideDown = [
+    {
+      transform: `translateY(-${animationsConfig.yScale || 50}%)`,
+    },
+    {
+      transform: `translateY(${animationsConfig.yScale || 0}%)`,
+    },
+  ];
+
+  const slideLeft = [
+    {
+      transform: `translateX(${animationsConfig.xScale || 50}%)`,
+    },
+    {
+      transform: `translateX(${animationsConfig.xScale || 0}%)`,
+    },
+  ];
+
+  const slideRight = [
+    {
+      transform: `translateX(-${animationsConfig.xScale || 50}%)`,
+    },
+    {
+      transform: `translateX(${animationsConfig.xScale || 0}%)`,
+    },
+  ];
   return (parent: HTMLElement) => {
     const parentData = parents.get(parent);
 

diff --git a/src/plugins/animations/types.ts b/src/plugins/animations/types.ts
@@ -2,6 +2,8 @@ import { ParentConfig } from "../../types";
 export interface AnimationsConfig {
   duration?: number;
   remapFinished?: () => void;
+  yScale?: number;
+  xScale?: number;
 }
 
 export interface AnimationsParentConfig<T> extends ParentConfig<T> {