1 files changed, 34 insertions, 10 deletions
diff --git a/src/client/views/nodes/trails/SlideEffect.tsx b/src/client/views/nodes/trails/SlideEffect.tsx
index 3e64cedd4..d4dfae059 100644
--- a/src/client/views/nodes/trails/SlideEffect.tsx
+++ b/src/client/views/nodes/trails/SlideEffect.tsx
@@ -1,9 +1,15 @@
-import { useSpring, animated, easings, to } from '@react-spring/web';
+import { useSpring, animated, easings, to, useInView } from '@react-spring/web';
 import React, { useEffect, useState } from 'react';
 import { PresEffect, PresEffectDirection } from './PresEnums';
 import './SlideEffect.scss';
+import { Doc } from '../../../../fields/Doc';
+import { NumCast } from '../../../../fields/Types';
 
 interface Props {
+    // pass in doc to extract width, height, bg
+    doc: Doc;
+    // wait for the transition movement to end before starting effect
+    delay: number;
     dir: PresEffectDirection;
     presEffect: PresEffect;
     friction: number;
@@ -13,7 +19,8 @@ interface Props {
 }
 
 // TODO: add visibility detector when the slide comes into view
-export default function SpringAnimation({ dir, friction, tension, mass, presEffect, children }: Props) {
+export default function SpringAnimation({ doc, delay, dir, friction, tension, mass, presEffect, children }: Props) {
+    console.log('delay:', delay);
     const [springs, api] = useSpring(
         () => ({
             from: {
@@ -36,6 +43,9 @@ export default function SpringAnimation({ dir, friction, tension, mass, presEffe
         }),
         [tension, friction, mass]
     );
+    const [ref, inView] = useInView({
+        once: true,
+    });
 
     //   Whether the animation is currently playing
     const [animating, setAnimating] = useState(false);
@@ -233,22 +243,26 @@ export default function SpringAnimation({ dir, friction, tension, mass, presEffe
     const getRenderDoc = () => {
         switch (presEffect) {
             case PresEffect.Rotate:
-                return <animated.div style={{ transform: to(springs.x, val => `rotate(${val}deg)`) }}>{children}</animated.div>;
+                return (
+                    <animated.div ref={ref} style={{ transform: to(springs.x, val => `rotate(${val}deg)`) }}>
+                        {children}
+                    </animated.div>
+                );
             case PresEffect.Flip:
                 return (
                     // Pass in doc dimensions
-                    <div className="flip-container">
+                    <div className="flip-container" ref={ref}>
                         {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' }}>
+                                <animated.div className={'flip-side flip-back'} style={{ transform: to(springs.x, val => `perspective(600px) rotateX(${val}deg)`), width: NumCast(doc.width), height: NumCast(doc.height) }} />
+                                <animated.div className={'flip-side flip-front'} style={{ transform: to(springs.x, val => `perspective(600px) rotateX(${val}deg)`), rotateX: '180deg', width: NumCast(doc.width), height: NumCast(doc.height) }}>
                                     {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' }}>
+                                <animated.div className={'flip-side flip-back'} style={{ transform: to(springs.x, val => `perspective(600px) rotateY(${val}deg)`), width: NumCast(doc.width), height: NumCast(doc.height) }} />
+                                <animated.div className={'flip-side flip-front'} style={{ transform: to(springs.x, val => `perspective(600px) rotateY(${val}deg)`), rotateY: '180deg', width: NumCast(doc.width), height: NumCast(doc.height) }}>
                                     {children}
                                 </animated.div>
                             </>
@@ -258,6 +272,7 @@ export default function SpringAnimation({ dir, friction, tension, mass, presEffe
             default:
                 return (
                     <animated.div
+                        ref={ref}
                         style={{
                             ...springs,
                         }}>
@@ -267,12 +282,21 @@ export default function SpringAnimation({ dir, friction, tension, mass, presEffe
         }
     };
 
+    // useEffect(() => {
+    //     // TODO: Control start with slide visibility instead
+    //     setTimeout(() => {
+    //         startAnimation();
+    //     }, 200);
+    // }, []);
+
     useEffect(() => {
+        if (!inView) return;
+        console.log('in view');
         // TODO: Control start with slide visibility instead
         setTimeout(() => {
             startAnimation();
-        }, 200);
-    }, []);
+        }, 100);
+    }, [inView]);
 
     return <div>{getRenderDoc()}</div>;
 }