diff --git a/src/plugins/animations/index.ts b/src/plugins/animations/index.ts index 82a28d6..6d34cbf 100644 --- 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 = {}) { + 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 index 705511b..6744e22 100644 --- 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 extends ParentConfig {