dropdowns, ui, roll

1 files changed, 34 insertions, 17 deletions

diff --git a/src/client/views/nodes/trails/SlideEffect.tsx b/src/client/views/nodes/trails/SlideEffect.tsx
index d4dfae059..20ff4b0b9 100644
--- a/src/client/views/nodes/trails/SlideEffect.tsx
+++ b/src/client/views/nodes/trails/SlideEffect.tsx
@@ -139,6 +139,7 @@ export default function SpringAnimation({ doc, delay, dir, friction, tension, ma
                     },
                 };
             default:
+                // no movement for center
                 return {
                     from: {
                         opacity: 0,
@@ -165,23 +166,6 @@ export default function SpringAnimation({ doc, delay, dir, friction, tension, ma
         ],
     };
 
-    // Flip
-    // const flipConfig = {
-    //     from: {
-    //         // opacity: 0,
-    //         transform: `perspective(600px) rotateX(0deg)`,
-    //     },
-    //     to: {
-    //         // opacity: 1,
-    //         transform: `perspective(600px) rotateX(180deg)`,
-    //         config: {
-    //             tension: tension,
-    //             friction: friction,
-    //             mass: mass,
-    //         },
-    //     },
-    // };
-
     const flipConfig = {
         from: {
             x: 0,
@@ -196,6 +180,32 @@ export default function SpringAnimation({ doc, delay, dir, friction, tension, ma
         },
     };
 
+    const rollConfig = {
+        from: {
+            opacity: 0,
+            x: -100,
+            y: -120,
+        },
+        to: {
+            opacity: 1,
+            x: 0,
+            y: 0,
+            config: {
+                tension: tension,
+                friction: friction,
+                mass: mass,
+            },
+        },
+    };
+
+    const lightspeedConfig = {
+        from: {
+            opacity: 0,
+        },
+        to: [],
+        loop: true,
+    };
+
     // Switch animation depending on slide effect
     const startAnimation = () => {
         switch (presEffect) {
@@ -215,6 +225,7 @@ export default function SpringAnimation({ doc, delay, dir, friction, tension, ma
                 api.start(flipConfig);
                 break;
             case PresEffect.Roll:
+                api.start(rollConfig);
                 break;
             case PresEffect.Lightspeed:
                 break;
@@ -269,6 +280,12 @@ export default function SpringAnimation({ doc, delay, dir, friction, tension, ma
                         )}
                     </div>
                 );
+            case PresEffect.Roll:
+                return (
+                    <animated.div ref={ref} style={{ opacity: springs.opacity, transform: to([springs.x, springs.y], (val, val2) => `translate3d(${val}%, 0, 0) rotate3d(0, 0, 1, ${val2}deg)`) }}>
+                        {children}
+                    </animated.div>
+                );
             default:
                 return (
                     <animated.div