diff options
| author | Sophie Zhang <sophie_zhang@brown.edu> | 2024-04-11 10:31:10 -0400 |
|---|---|---|
| committer | Sophie Zhang <sophie_zhang@brown.edu> | 2024-04-11 10:31:10 -0400 |
| commit | 64dbcf06fdae7e5d0c8b69210e7b0e8ef169282d (patch) | |
| tree | 121a14821e6e9d6817335856482300e3a8889391 | |
| parent | 4ff13042cfcddfefc8c8ab531449a30eebab0822 (diff) | |
flipping semi-working need to fix dimensions
| -rw-r--r-- | src/client/views/nodes/trails/SlideEffect.scss | 11 | ||||
| -rw-r--r-- | src/client/views/nodes/trails/SlideEffect.tsx | 20 |
2 files changed, 23 insertions, 8 deletions
diff --git a/src/client/views/nodes/trails/SlideEffect.scss b/src/client/views/nodes/trails/SlideEffect.scss index 5d8e3119b..6a9e93028 100644 --- a/src/client/views/nodes/trails/SlideEffect.scss +++ b/src/client/views/nodes/trails/SlideEffect.scss @@ -7,15 +7,18 @@ .flip-side { position: absolute; - // max-width: 500px; - // max-height: 500px; - // width: 350px; - // height: 200px; + max-width: 500px; + max-height: 500px; + width: 350px; + height: 200px; will-change: transform, opacity; + backface-visibility: hidden; } .flip-front { } .flip-back { + // Get the background color of node instead + background-color: rgb(223, 223, 223); } 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: |