1 files changed, 43 insertions, 8 deletions
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index ee7bbbdba..5897dc105 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -50,6 +50,8 @@ import { KeyValueBox } from './KeyValueBox';
 import { LinkAnchorBox } from './LinkAnchorBox';
 import { FormattedTextBox } from './formattedText/FormattedTextBox';
 import { PresEffect, PresEffectDirection } from './trails';
+import SlideEffect from './trails/SlideEffect';
+import { SpringSettings, SpringType, springMappings } from './trails/SpringUtils';
 interface Window {
     MediaRecorder: MediaRecorder;
 }
@@ -995,7 +997,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
      * @returns a function that will wrap a JSX animation element wrapping any JSX element
      */
     public static AnimationEffect(renderDoc: JSX.Element, presEffectDoc: Opt<Doc>, root: Doc) {
-        const dir = presEffectDoc?.presentation_effectDirection ?? presEffectDoc?.followLinkAnimDirection;
+        let dir = presEffectDoc?.presentation_effectDirection ?? presEffectDoc?.followLinkAnimDirection;
         const effectProps = {
             left: dir === PresEffectDirection.Left,
             right: dir === PresEffectDirection.Right,
@@ -1005,18 +1007,51 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
             delay: 0,
             duration: Cast(presEffectDoc?.presentation_transition, 'number', Cast(presEffectDoc?.followLinkTransitionTime, 'number', null)),
         };
+
+        let timing = StrCast(presEffectDoc?.presEffectTiming);
+        let timingConfig: SpringSettings | undefined;
+        if (timing) {
+            timingConfig = JSON.parse(timing);
+        }
+
+        if (!timingConfig) {
+            timingConfig = {
+                type: SpringType.GENTLE,
+                ...springMappings['gentle'],
+            };
+        }
+
+        if (!dir) {
+            dir = PresEffectDirection.Center;
+        }
+
+        const transitionTime = presEffectDoc?.presentation_transition ? NumCast(presEffectDoc?.presentation_transition) : 500;
         //prettier-ignore
+
         switch (StrCast(presEffectDoc?.presentation_effect, StrCast(presEffectDoc?.followLinkAnimEffect))) {
-            default: 
+            default:
             case PresEffect.None:       return renderDoc;
-            case PresEffect.Zoom:       return <Zoom {...effectProps}>{renderDoc}</Zoom>;
-            case PresEffect.Fade:       return <Fade {...effectProps}>{renderDoc}</Fade>;
-            case PresEffect.Flip:       return <Flip {...effectProps}>{renderDoc}</Flip>;
-            case PresEffect.Rotate:     return <Rotate {...effectProps}>{renderDoc}</Rotate>;
-            case PresEffect.Bounce:     return <Bounce {...effectProps}>{renderDoc}</Bounce>;
-            case PresEffect.Roll:       return <Roll {...effectProps}>{renderDoc}</Roll>;
+            case PresEffect.Zoom:       return <SlideEffect doc={root} dir={dir as PresEffectDirection} presEffect={PresEffect.Zoom} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
+            case PresEffect.Fade:       return <SlideEffect  doc={root} dir={dir as PresEffectDirection} presEffect={PresEffect.Fade} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
+            case PresEffect.Flip:       return <SlideEffect doc={root} dir={dir as PresEffectDirection} presEffect={PresEffect.Flip} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
+            case PresEffect.Rotate:       return <SlideEffect  doc={root}  dir={dir as PresEffectDirection} presEffect={PresEffect.Rotate} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
+            case PresEffect.Bounce:     return <SlideEffect doc={root} dir={dir as PresEffectDirection} presEffect={PresEffect.Bounce} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
+            case PresEffect.Roll:       return <SlideEffect doc={root}  dir={dir as PresEffectDirection} presEffect={PresEffect.Roll} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
+            // keep as preset, doesn't really make sense with spring config
             case PresEffect.Lightspeed: return <JackInTheBox {...effectProps}>{renderDoc}</JackInTheBox>;
         }
+        // switch (StrCast(presEffectDoc?.presentation_effect, StrCast(presEffectDoc?.followLinkAnimEffect))) {
+        //     default:
+        //     // package used: react-awesome-reveal
+        //     case PresEffect.None:       return renderDoc;
+        //     case PresEffect.Zoom:       return <Zoom {...effectProps}>{renderDoc}</Zoom>;
+        //     case PresEffect.Fade:       return <Fade {...effectProps}>{renderDoc}</Fade>;
+        //     case PresEffect.Flip:       return <Flip {...effectProps}>{renderDoc}</Flip>;
+        //     case PresEffect.Rotate:     return <Rotate {...effectProps}>{renderDoc}</Rotate>;
+        //     case PresEffect.Bounce:     return <Bounce {...effectProps}>{renderDoc}</Bounce>;
+        //     case PresEffect.Roll:       return <Roll {...effectProps}>{renderDoc}</Roll>;
+        //     case PresEffect.Lightspeed: return <JackInTheBox {...effectProps}>{renderDoc}</JackInTheBox>;
+        // }
     }
     public static recordAudioAnnotation(dataDoc: Doc, field: string, onRecording?: (stop: () => void) => void, onEnd?: () => void) {
         let gumStream: any;