Add more EmberAnimation config

web/app/templates/application.hbs

@@ -10,6 +10,10 @@
 
 <Modals />
 
+<div class="absolute top-0 left-0">
+  <AnimatedOrphans />
+</div>
+
 {{#if this.animatedToolsAreShown}}
   <AnimatedTools />
 {{/if}}

web/app/utils/ember-animated/animate-scale.ts

@@ -0,0 +1,55 @@
+// Modified from
+// https://github.com/ember-animation/ember-animated/issues/38#issuecomment-392276685
+
+import { Motion, rAF, Sprite, Tween } from 'ember-animated';
+import { BaseOptions } from 'ember-animated/-private/motion';
+import { TweenLike } from 'ember-animated/-private/tween';
+
+interface AnimateScaleOptions extends BaseOptions {
+  from?: number;
+  to?: number;
+  easing?: (time: number) => number;
+}
+
+export class AnimatedScale extends Motion<AnimateScaleOptions> {
+  prior: Motion<AnimateScaleOptions> | null | undefined = null;
+  tween: TweenLike | null = null;
+
+  interrupted(motions: Motion[]): void {
+    this.prior = motions.find((m: Motion) => m instanceof this.constructor);
+  }
+
+  *animate(): Generator<Promise<unknown>, void> {
+    let { sprite, duration, opts } = this;
+    let to =
+      opts.to != null
+        ? opts.to
+        : sprite.finalComputedStyle != null
+        ? parseFloat(sprite.finalComputedStyle.opacity)
+        : 1;
+    let from;
+
+    from =
+      opts.from != null
+        ? opts.from
+        : sprite.initialComputedStyle != null
+        ? parseFloat(sprite.initialComputedStyle.opacity)
+        : 0;
+
+    this.tween = new Tween(from, to, duration);
+
+    while (!this.tween.done) {
+      sprite.applyStyles({
+        transform: `scale(${this.tween.currentValue})`,
+      });
+      yield rAF();
+    }
+  }
+}
+
+export default function animateScale(
+  sprite: Sprite,
+  opts?: Partial<AnimateScaleOptions>
+): Promise<unknown> {
+  return new AnimatedScale(sprite, opts).run();
+}

web/app/utils/ember-animated/easings.ts

@@ -0,0 +1,9 @@
+// https://spicyyoghurt.com/tools/easing-functions
+
+let b = 0; // start value
+let c = 1; // change
+let d = 1; // duration
+
+export function easeOutQuad(time: number): number {
+  return -c * (time /= d) * (time - 2) + b;
+}

web/tsconfig.json

@@ -24,6 +24,7 @@
     "app/**/*",
     "tests/**/*",
     "types/**/*",
+    "node_modules/@gavant/glint-template-types/types/ember-animated/*",
     "node_modules/@gavant/glint-template-types/types/ember-click-outside/modifier.d.ts",
     "node_modules/@gavant/glint-template-types/types/ember-concurrency/perform.d.ts",
     "node_modules/@gavant/glint-template-types/types/ember-on-helper/on-document.d.ts",

web/types/ember-animated/transition.ts

@@ -0,0 +1 @@
+export type EmberAnimatedTransition = Generator<unknown, void, void>;