From 61bb2a4db9f2444a160ddefbf9cc7f2875b95b86 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Tue, 10 Oct 2023 13:35:12 +0200
Subject: [PATCH] Story Ribbon: Fix animation glitches (#3907)

---
 src/components/story/helpers/ribbonAnimation.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/story/helpers/ribbonAnimation.ts b/src/components/story/helpers/ribbonAnimation.ts
index 71845d886..6999a0b20 100644
--- a/src/components/story/helpers/ribbonAnimation.ts
+++ b/src/components/story/helpers/ribbonAnimation.ts
@@ -11,7 +11,7 @@ export const ANIMATION_DURATION = 250;
 const RIBBON_OFFSET = 0.25 * REM;
 const RIBBON_Z_INDEX = 11;
 const STROKE_OFFSET = 0.1875 * REM;
-const CANVAS_OFFSET = 0.1 * REM;
+const CANVAS_OFFSET = 0.125 * REM;
 
 const callbacks: Set<NoneToVoidFunction> = new Set();
 
@@ -75,9 +75,9 @@ export function animateOpening(isArchived?: boolean) {
 
     fromTop -= STROKE_OFFSET;
 
-    const toTranslateX = toLeft - fromLeft;
-    const toTranslateY = toTop - fromTop - CANVAS_OFFSET;
-    const toScale = toWidth / fromWidth;
+    const toTranslateX = toLeft - fromLeft + 2 * STROKE_OFFSET;
+    const toTranslateY = toTop - fromTop + STROKE_OFFSET;
+    const toScale = toWidth / (fromWidth + 2 * STROKE_OFFSET);
 
     requestMutation(() => {
       if (!toggleAvatar) return;
@@ -215,9 +215,9 @@ export function animateClosing(isArchived?: boolean) {
 
     toTop -= STROKE_OFFSET;
 
-    const fromTranslateX = fromLeft - toLeft;
-    const fromTranslateY = fromTop - toTop;
-    const fromScale = fromWidth / toWidth;
+    const fromTranslateX = fromLeft - toLeft + 2 * STROKE_OFFSET;
+    const fromTranslateY = fromTop - toTop + STROKE_OFFSET;
+    const fromScale = fromWidth / (toWidth + 2 * STROKE_OFFSET);
 
     requestMutation(() => {
       const ghost = createGhost(user);