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 /src/client/views/nodes/trails/SlideEffect.tsx | |
| parent | 4ff13042cfcddfefc8c8ab531449a30eebab0822 (diff) | |
flipping semi-working need to fix dimensions
Diffstat (limited to 'src/client/views/nodes/trails/SlideEffect.tsx')
| -rw-r--r-- | src/client/views/nodes/trails/SlideEffect.tsx | 20 |
1 files changed, 16 insertions, 4 deletions
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: |