From 4806b162eaf55abca7f62db9a9b86e82291cf8af Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 21 Feb 2022 13:41:57 +0000
Subject: [PATCH] Add custom svelte transition to drawer and add local
 parameter to prevent bad transitions

---
 packages/bbui/src/Drawer/Drawer.svelte | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/bbui/src/Drawer/Drawer.svelte b/packages/bbui/src/Drawer/Drawer.svelte
index e6b63b7df8..e5eacb1a44 100644
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@@ -1,5 +1,4 @@
 <script>
-  import { slide } from "svelte/transition"
   import Portal from "svelte-portal"
   import Button from "../Button/Button.svelte"
   import Body from "../Typography/Body.svelte"
@@ -7,7 +6,9 @@
 
   export let title
   export let fillWidth
+
   let visible = false
+
   export function show() {
     if (visible) {
       return
@@ -21,11 +22,27 @@
     }
     visible = false
   }
+
+  const easeInOutQuad = x => {
+    return x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2
+  }
+
+  // Use a custom svelte transition here because the built-in slide
+  // transition has a horrible overshoot
+  const slide = () => {
+    return {
+      duration: 360,
+      css: t => {
+        const translation = 100 - Math.round(easeInOutQuad(t) * 100)
+        return `transform: translateY(${translation}%);`
+      },
+    }
+  }
 </script>
 
 {#if visible}
   <Portal>
-    <section class:fillWidth class="drawer" transition:slide>
+    <section class:fillWidth class="drawer" transition:slide|local>
       <header>
         <div class="text">
           <Heading size="XS">{title}</Heading>