Make pres aniamtions last as long as their transition time

3 files changed, 9 insertions, 8 deletions

diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 350f0db76..c564e66e5 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1030,15 +1030,14 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
             default:
             case PresEffect.None:       return renderDoc;
             case PresEffect.Zoom:       return <SlideEffect doc={root} dir={dir} presEffect={PresEffect.Zoom} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
-            case PresEffect.Fade:       return <SlideEffect  doc={root} dir={dir} presEffect={PresEffect.Fade} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
+            case PresEffect.Fade:       return <SlideEffect doc={root} dir={dir} presEffect={PresEffect.Fade} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
             case PresEffect.Flip:       return <SlideEffect doc={root} dir={dir} presEffect={PresEffect.Flip} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
-            case PresEffect.Rotate:     return <SlideEffect  doc={root}  dir={dir} presEffect={PresEffect.Rotate} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
+            case PresEffect.Rotate:     return <SlideEffect doc={root} dir={dir} presEffect={PresEffect.Rotate} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
             case PresEffect.Bounce:     return <SlideEffect doc={root} dir={dir} presEffect={PresEffect.Bounce} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
-            case PresEffect.Roll:       return <SlideEffect doc={root}  dir={dir} presEffect={PresEffect.Roll} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
+            case PresEffect.Roll:       return <SlideEffect doc={root} dir={dir} 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>;
         } // prettier-ignore
-
     }
     public static recordAudioAnnotation(dataDoc: Doc, field: string, onRecording?: (stop: () => void) => void, onEnd?: () => void) {
         let gumStream: any;
diff --git a/src/client/views/nodes/trails/SlideEffect.tsx b/src/client/views/nodes/trails/SlideEffect.tsx
index e1cf9b127..bad1fd8fa 100644
--- a/src/client/views/nodes/trails/SlideEffect.tsx
+++ b/src/client/views/nodes/trails/SlideEffect.tsx
@@ -41,9 +41,9 @@ export default function SpringAnimation({ doc, dir, friction, tension, mass, pre
                 scale: 1,
             },
             config: {
-                tension: tension,
-                friction: friction,
-                mass: mass,
+                tension,
+                friction,
+                mass,
             },
             onStart: () => {},
             onRest: () => {},
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index 48214cf25..16aeb9abe 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -1276,10 +1276,12 @@ export namespace Doc {
         document.removeEventListener('pointerdown', linkFollowUnhighlight);
         document.addEventListener('pointerdown', linkFollowUnhighlight);
         if (UnhighlightTimer) clearTimeout(UnhighlightTimer);
+        const presTransition = Number(presentation_effect?.presentation_transition);
+        const duration = isNaN(presTransition) ? 5000 : presTransition;
         UnhighlightTimer = window.setTimeout(() => {
             linkFollowUnhighlight();
             UnhighlightTimer = 0;
-        }, 5000);
+        }, duration);
     }
 
     export var highlightedDocs = new ObservableSet<Doc>();