1 files changed, 77 insertions, 17 deletions
diff --git a/src/client/views/nodes/trails/SlideEffect.tsx b/src/client/views/nodes/trails/SlideEffect.tsx
index e3423069b..eee52c3ec 100644
--- a/src/client/views/nodes/trails/SlideEffect.tsx
+++ b/src/client/views/nodes/trails/SlideEffect.tsx
@@ -12,7 +12,7 @@ interface Props {
 }
 
 // TODO: add visibility detector when the slide comes into view
-export default function SpringAnimation({ dir, friction, tension, mass, presEffect: presEffect, children }: Props) {
+export default function SpringAnimation({ dir, friction, tension, mass, presEffect, children }: Props) {
     const [springs, api] = useSpring(
         () => ({
             from: {
@@ -154,7 +154,36 @@ export default function SpringAnimation({ dir, friction, tension, mass, presEffe
         ],
     };
 
-    const flipConfig = {};
+    // 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,
+        },
+        to: {
+            x: 180,
+            config: {
+                tension: tension,
+                friction: friction,
+                mass: mass,
+            },
+        },
+    };
 
     const startAnimation = () => {
         if (presEffect === PresEffect.Bounce) {
@@ -168,7 +197,51 @@ export default function SpringAnimation({ dir, friction, tension, mass, presEffe
         }
     };
 
-    const flipRender = () => {};
+    // const flipRender = () => {
+    //     return (
+    //         <div className="flip-container">
+    //             <animated.div className={'flip-side flip-back'} style={{ opacity: opacity.to(o => 1 - o), transform }} />
+    //             <animated.div
+    //                 className={'flip-side flip-front'}
+    //                 style={{
+    //                     opacity,
+    //                     transform,
+    //                     rotateX: '180deg',
+    //                 }}>
+    //                 {children}
+    //             </animated.div>
+    //         </div>
+    //     );
+    // };
+
+    const flipRender = () => {
+        return (
+            <div className="flip-container">
+                <animated.div className={'flip-side flip-back'} style={{ transform: to(springs.x, val => `perspective(600px) rotateX(${val}deg)`) }} />
+                <animated.div className={'flip-side flip-front'} style={{ transform: to(springs.x, val => `perspective(600px) rotateX(${val}deg)`), rotateX: '180deg' }}>
+                    {children}
+                </animated.div>
+            </div>
+        );
+    };
+
+    const getRenderDoc = () => {
+        switch (presEffect) {
+            case PresEffect.Rotate:
+                return <animated.div style={{ transform: to(springs.x, val => `rotate(${val}deg)`) }}>{children}</animated.div>;
+            case PresEffect.Flip:
+                return flipRender();
+            default:
+                return (
+                    <animated.div
+                        style={{
+                            ...springs,
+                        }}>
+                        {children}
+                    </animated.div>
+                );
+        }
+    };
 
     useEffect(() => {
         // TODO: Control start with slide visibility instead
@@ -177,18 +250,5 @@ export default function SpringAnimation({ dir, friction, tension, mass, presEffe
         }, 200);
     }, []);
 
-    return (
-        <div>
-            {presEffect !== PresEffect.Rotate ? (
-                <animated.div
-                    style={{
-                        ...springs,
-                    }}>
-                    {children}
-                </animated.div>
-            ) : (
-                <animated.div style={{ transform: to(springs.x, val => `rotate(${val}deg)`) }}>{children}</animated.div>
-            )}
-        </div>
-    );
+    return <div>{getRenderDoc()}</div>;
 }