feat: fix animations

.gitignore

@@ -2,7 +2,7 @@
 .aws
 .npmrc
 
-# General 
+# General
 .env-local
 .hidden
 *~
@@ -60,11 +60,14 @@ mutagen.yml.lock
 www/
 .turbo
 
-# Outline specific 
+# Outline specific
 custom-elements.json
 component-list.json
 resolved-outline-config.ts
 resolved-tailwind-config.ts
 safelist.txt
 *.lit.ts
 *.generated.css
+
+# env
+.env.local

package.json

@@ -61,6 +61,7 @@
     "reset:install": "yarn install",
     "restart": "yarn reset && yarn start",
     "start": "yarn storybook dev -p ${npm_package_storybook_port}",
+    "start:local": "yarn storybook dev -p 7777",
     "storybook": "storybook",
     "storybook:build": "storybook build",
     "test": "turbo run test"
@@ -109,6 +110,7 @@
     "lint-staged": "^10.5.4",
     "lit-analyzer": "^1.2.1",
     "lit-html": "^2.3.1",
+    "@lit-labs/motion": "^1.0.0",
     "npm-run-all": "^4.1.5",
     "postcss": "8.4.8",
     "postcss-custom-properties": "12.1.8",

packages/outline-breadcrumbs/src/outline-breadcrumbs.css

@@ -8,9 +8,12 @@
 
 a,
 ::slotted(a) {
-  @apply font-body transition-colors duration-300;
+  @apply font-body;
   text-decoration: var(--outline-breadcrumb--link-decoration--computed);
   color: var(--outline-breadcrumb--link-color--computed);
+  transition-property: color, text-decoration;
+  transition-timing-function: ease-in;
+  transition-duration: 300ms;
 }
 
 a:hover,

packages/outline-button/src/outline-button.css

@@ -22,8 +22,8 @@
   align-items: center;
   cursor: pointer;
   transition-property: color, background-color, border-color,
-    text-decoration-color, fill, stroke, outline, outline-color;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    text-decoration-color, fill, stroke, outline, outline-color, box-shadow;
+  transition-timing-function: ease-in;
   transition-duration: 300ms;
   text-decoration-line: none;
   outline: none;

packages/outline-modal/src/outline-modal.css

@@ -1,6 +1,10 @@
 #overlay {
-  @apply fixed top-0 left-0 right-0 bottom-0 z-50 flex items-center justify-center bg-outline-black bg-opacity-60;
+  @apply fixed top-0 left-0 right-0 bottom-0 z-50 flex items-center justify-center bg-outline-black bg-opacity-60 transition-opacity;
   background-color: rgb(0, 0, 0, var(--tw-bg-opacity));
+  opacity: 0;
+}
+#overlay.open {
+  opacity: 1;
 }
 
 #container {

packages/outline-modal/src/outline-modal.ts

@@ -1,4 +1,5 @@
 import { html, TemplateResult, CSSResultGroup } from 'lit';
+import { animate, fadeIn, fadeOut } from '@lit-labs/motion';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
@@ -94,6 +95,9 @@ export class OutlineModal
 
   private _overlayTemplate(): TemplateResult {
     let template = html``;
+    const keyFrameOptions = {
+      duration: 300,
+    };
 
     if (this.isOpen) {
       template = html`
@@ -103,6 +107,13 @@ export class OutlineModal
           class="${this.size}"
           @click="${this._handleOverlayClick}"
           @keydown="${this._handleOverlayKeydown}"
+          ${animate({
+            properties: ['opacity'],
+            in: fadeIn,
+            out: fadeOut,
+            skipInitial: false,
+            keyframeOptions: keyFrameOptions,
+          })}
         >
           <div
             id="container"

yarn.lock

@@ -2875,6 +2875,13 @@
   resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60"
   integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==
 
+"@lit-labs/motion@^1.0.0":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@lit-labs/motion/-/motion-1.0.3.tgz#8ca5c6a002acd9fa2cb1a45c5a325e369a00880c"
+  integrity sha512-y62SxlUTeFtoQTS8/KqAnOnOTdm0FpB23PgFFc99lPj9T5Gg0uktzRmmmqxPaGoNeRg2cLcPpbvK8iEo8CWMoQ==
+  dependencies:
+    lit "^2.0.0"
+
 "@lit/reactive-element@^1.0.0", "@lit/reactive-element@^1.3.0", "@lit/reactive-element@^1.4.0":
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-1.4.1.tgz#3f587eec5708692135bc9e94cf396130604979f3"