preliminary react-spring anims

1 files changed, 131 insertions, 0 deletions

diff --git a/src/client/views/nodes/trails/SlideEffect.tsx b/src/client/views/nodes/trails/SlideEffect.tsx
new file mode 100644
index 000000000..918ea93bd
--- /dev/null
+++ b/src/client/views/nodes/trails/SlideEffect.tsx
@@ -0,0 +1,131 @@
+import { Button } from '@mui/material';
+import { useSpring, animated, easings } from '@react-spring/web';
+import React, { useEffect, useState } from 'react';
+
+export enum EffectType {
+    ZOOM = 'zoom',
+    FADE = 'fade',
+    BOUNCE = 'bounce',
+}
+
+interface Props {
+    effectType: EffectType;
+    friction: number;
+    tension: number;
+    mass: number;
+    children: React.ReactNode;
+}
+
+export default function SpringAnimation({ friction, tension, mass, effectType, children }: Props) {
+    const [springs, api] = useSpring(
+        () => ({
+            from: {
+                x: 0,
+                y: 0,
+                opacity: 0,
+                scale: 1,
+            },
+            config: {
+                tension: tension,
+                friction: friction,
+                mass: mass,
+            },
+            onStart: () => {
+                console.log('started');
+            },
+            onRest: () => {
+                console.log('resting');
+            },
+        }),
+        [tension, friction, mass]
+    );
+
+    //   Whether the animation is currently playing
+    const [animating, setAnimating] = useState(false);
+
+    const zoomConfig = {
+        from: {
+            x: 0,
+            y: 0,
+            opacity: 0,
+            scale: 0,
+        },
+        to: {
+            x: 0,
+            y: 0,
+            opacity: 1,
+            scale: 1,
+            config: {
+                tension: tension,
+                friction: friction,
+                mass: mass,
+            },
+        },
+    };
+
+    const bounceConfig = {
+        from: {
+            opacity: 0,
+            x: -200,
+            y: 0,
+        },
+        to: [
+            {
+                opacity: 1,
+                x: 0,
+                y: 0,
+                config: {
+                    tension: tension,
+                    friction: friction,
+                    mass: mass,
+                },
+            },
+        ],
+    };
+
+    const handleClick = () => {
+        if (effectType === EffectType.BOUNCE) {
+            api.start(bounceConfig);
+        } else if (effectType === EffectType.ZOOM) {
+            api.start(zoomConfig);
+        }
+    };
+
+    useEffect(() => {
+        setTimeout(() => {
+            handleClick();
+        }, 200);
+    }, []);
+
+    return (
+        <div
+        // className="demo"
+        // onPointerEnter={() => {
+        //     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> */}
+        </div>
+    );
+}