From 64dbcf06fdae7e5d0c8b69210e7b0e8ef169282d Mon Sep 17 00:00:00 2001
From: Sophie Zhang <sophie_zhang@brown.edu>
Date: Thu, 11 Apr 2024 10:31:10 -0400
Subject: flipping semi-working need to fix dimensions

---
 src/client/views/nodes/trails/SlideEffect.tsx | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

(limited to 'src/client/views/nodes/trails/SlideEffect.tsx')

diff --git a/src/client/views/nodes/trails/SlideEffect.tsx b/src/client/views/nodes/trails/SlideEffect.tsx
index 6221592a0..3e64cedd4 100644
--- a/src/client/views/nodes/trails/SlideEffect.tsx
+++ b/src/client/views/nodes/trails/SlideEffect.tsx
@@ -236,11 +236,23 @@ export default function SpringAnimation({ dir, friction, tension, mass, presEffe
                 return <animated.div style={{ transform: to(springs.x, val => `rotate(${val}deg)`) }}>{children}</animated.div>;
             case PresEffect.Flip:
                 return (
+                    // Pass in doc dimensions
                     <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>
+                        {dir === PresEffectDirection.Bottom || dir === PresEffectDirection.Top ? (
+                            <>
+                                <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>
+                            </>
+                        ) : (
+                            <>
+                                <animated.div className={'flip-side flip-back'} style={{ transform: to(springs.x, val => `perspective(600px) rotateY(${val}deg)`) }} />
+                                <animated.div className={'flip-side flip-front'} style={{ transform: to(springs.x, val => `perspective(600px) rotateY(${val}deg)`), rotateX: '180deg' }}>
+                                    {children}
+                                </animated.div>
+                            </>
+                        )}
                     </div>
                 );
             default:
-- 
cgit v1.2.3-70-g09d2