more springs

1 files changed, 134 insertions, 0 deletions

diff --git a/src/client/views/nodes/trails/SlideEffectPreview.tsx b/src/client/views/nodes/trails/SlideEffectPreview.tsx
new file mode 100644
index 000000000..aacb37b48
--- /dev/null
+++ b/src/client/views/nodes/trails/SlideEffectPreview.tsx
@@ -0,0 +1,134 @@
+import { Button } from '@mui/material';
+import { useSpring, animated, easings } from '@react-spring/web';
+import React, { useEffect, useState } from 'react';
+
+interface Props {
+    friction: number;
+    tension: number;
+    mass: number;
+    children: React.ReactNode;
+}
+
+export default function SpringAnimationPreview({ friction, tension, mass, children }: Props) {
+    const [springs, api] = useSpring(
+        () => ({
+            from: {
+                x: 0,
+                y: 0,
+                opacity: 1,
+                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,
+                },
+            },
+            {
+                opacity: 0,
+                scale: 0,
+                x: 0,
+                y: 0,
+                config: {
+                    duration: 500,
+                    easing: easings.easeInOutCubic,
+                },
+            },
+        ],
+    };
+
+    const bounceConfig = {
+        from: {
+            x: -50,
+            y: 0,
+        },
+        to: [
+            {
+                x: 50,
+                y: 0,
+                config: {
+                    tension: tension,
+                    friction: friction,
+                    mass: mass,
+                },
+            },
+            {
+                x: -50,
+                y: 0,
+                config: {
+                    duration: 500,
+                    easing: easings.easeInOutCubic,
+                },
+            },
+        ],
+    };
+
+    const animate = () => {
+        api.start(bounceConfig);
+    };
+
+    useEffect(() => {
+        animate();
+    }, []);
+
+    return (
+        <div
+            style={{
+                width: '200px',
+                height: '150px',
+                borderRadius: '4px',
+                border: '1px solid #696969',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+            }}
+            onPointerEnter={() => {
+                animate();
+            }}>
+            {/* style={{
+          width: "50px",
+          height: "50px",
+          backgroundColor: "#ff6d6d",
+          borderRadius: "4px",
+          ...springs,
+        }} */}
+            <animated.div
+                style={{
+                    ...springs,
+                }}>
+                {children}
+            </animated.div>
+        </div>
+    );
+}