1 files changed, 49 insertions, 6 deletions

diff --git a/src/client/views/nodes/trails/SlideEffect.tsx b/src/client/views/nodes/trails/SlideEffect.tsx
index 918ea93bd..ae25bfb90 100644
--- a/src/client/views/nodes/trails/SlideEffect.tsx
+++ b/src/client/views/nodes/trails/SlideEffect.tsx
@@ -1,6 +1,7 @@
 import { Button } from '@mui/material';
 import { useSpring, animated, easings } from '@react-spring/web';
 import React, { useEffect, useState } from 'react';
+import { PresEffectDirection } from './PresEnums';
 
 export enum EffectType {
     ZOOM = 'zoom',
@@ -9,6 +10,7 @@ export enum EffectType {
 }
 
 interface Props {
+    dir: PresEffectDirection;
     effectType: EffectType;
     friction: number;
     tension: number;
@@ -16,7 +18,7 @@ interface Props {
     children: React.ReactNode;
 }
 
-export default function SpringAnimation({ friction, tension, mass, effectType, children }: Props) {
+export default function SpringAnimation({ dir, friction, tension, mass, effectType, children }: Props) {
     const [springs, api] = useSpring(
         () => ({
             from: {
@@ -63,12 +65,53 @@ export default function SpringAnimation({ friction, tension, mass, effectType, c
         },
     };
 
+    const getBounceConfigFrom = () => {
+        switch (dir) {
+            case PresEffectDirection.Left:
+                return {
+                    from: {
+                        opacity: 0,
+                        x: -200,
+                        y: 0,
+                    },
+                };
+            case PresEffectDirection.Right:
+                return {
+                    from: {
+                        opacity: 0,
+                        x: 200,
+                        y: 0,
+                    },
+                };
+            case PresEffectDirection.Top:
+                return {
+                    from: {
+                        opacity: 0,
+                        x: 0,
+                        y: -200,
+                    },
+                };
+            case PresEffectDirection.Bottom:
+                return {
+                    from: {
+                        opacity: 0,
+                        x: 0,
+                        y: 200,
+                    },
+                };
+            default:
+                return {
+                    from: {
+                        opacity: 0,
+                        x: 0,
+                        y: 0,
+                    },
+                };
+        }
+    };
+
     const bounceConfig = {
-        from: {
-            opacity: 0,
-            x: -200,
-            y: 0,
-        },
+        ...getBounceConfigFrom(),
         to: [
             {
                 opacity: 1,