zoom fade rotate

1 files changed, 56 insertions, 25 deletions

diff --git a/src/client/views/nodes/trails/SlideEffect.tsx b/src/client/views/nodes/trails/SlideEffect.tsx
index ae25bfb90..af0e7461b 100644
--- a/src/client/views/nodes/trails/SlideEffect.tsx
+++ b/src/client/views/nodes/trails/SlideEffect.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@mui/material';
-import { useSpring, animated, easings } from '@react-spring/web';
+import { useSpring, animated, easings, to } from '@react-spring/web';
 import React, { useEffect, useState } from 'react';
 import { PresEffectDirection } from './PresEnums';
 
@@ -7,6 +7,7 @@ export enum EffectType {
     ZOOM = 'zoom',
     FADE = 'fade',
     BOUNCE = 'bounce',
+    ROTATE = 'rotate',
 }
 
 interface Props {
@@ -47,16 +48,52 @@ export default function SpringAnimation({ dir, friction, tension, mass, effectTy
 
     const zoomConfig = {
         from: {
+            scale: 0,
             x: 0,
             y: 0,
-            opacity: 0,
-            scale: 0,
+            opacity: 1,
+            // opacity: 0,
         },
         to: {
+            scale: 1,
             x: 0,
             y: 0,
             opacity: 1,
+            // opacity: 1,
+            config: {
+                tension: tension,
+                friction: friction,
+                mass: mass,
+            },
+        },
+    };
+
+    const fadeConfig = {
+        from: {
+            opacity: 0,
             scale: 1,
+            x: 0,
+            y: 0,
+        },
+        to: {
+            opacity: 1,
+            scale: 1,
+            x: 0,
+            y: 0,
+            config: {
+                tension: tension,
+                friction: friction,
+                mass: mass,
+            },
+        },
+    };
+
+    const rotateConfig = {
+        from: {
+            x: 0,
+        },
+        to: {
+            x: 360,
             config: {
                 tension: tension,
                 friction: friction,
@@ -131,6 +168,10 @@ export default function SpringAnimation({ dir, friction, tension, mass, effectTy
             api.start(bounceConfig);
         } else if (effectType === EffectType.ZOOM) {
             api.start(zoomConfig);
+        } else if (effectType === EffectType.ROTATE) {
+            api.start(rotateConfig);
+        } else if (effectType === EffectType.FADE) {
+            api.start(fadeConfig);
         }
     };
 
@@ -147,28 +188,18 @@ export default function SpringAnimation({ dir, friction, tension, mass, effectTy
         //     handleClick();
         // }}
         >
-            {/* style={{
-          width: "50px",
-          height: "50px",
-          backgroundColor: "#ff6d6d",
-          borderRadius: "4px",
-          ...springs,
-        }} */}
-            <animated.div
-                style={{
-                    // display: 'inline-block',
-                    // transform: 'translate(50px, 50px)',
-                    ...springs,
-                }}>
-                {children}
-            </animated.div>
-            {/* <Button
-        onClick={handleClick}
-        sx={{ marginTop: "100px" }}
-        variant="contained"
-      >
-        Animate
-      </Button> */}
+            {effectType !== EffectType.ROTATE ? (
+                <animated.div
+                    style={{
+                        // display: 'inline-block',
+                        // transform: 'translate(50px, 50px)',
+                        ...springs,
+                    }}>
+                    {children}
+                </animated.div>
+            ) : (
+                <animated.div style={{ transform: to(springs.x, val => `rotate(${val}deg)`) }}>{children}</animated.div>
+            )}
         </div>
     );
 }