From 46e3ef9eabb43dd4f8fc77d5c7c8d6b222a61330 Mon Sep 17 00:00:00 2001
From: Richard Harris <richard.a.harris@gmail.com>
Date: Sat, 13 Apr 2019 15:28:05 -0400
Subject: [PATCH 1/2] better transitions

---
 transition.mjs | 33 +++++++++++++++++++++++----------
 1 file changed, 23 insertions(+), 10 deletions(-)

diff --git a/transition.mjs b/transition.mjs
index ccb0ef68c7..2421b1cd72 100644
--- a/transition.mjs
+++ b/transition.mjs
@@ -18,19 +18,22 @@ export function fly(node, {
 	duration = 400,
 	easing = cubicOut,
 	x = 0,
-	y = 0
+	y = 0,
+	opacity = 0
 }) {
 	const style = getComputedStyle(node);
-	const opacity = +style.opacity;
+	const target_opacity = +style.opacity;
 	const transform = style.transform === 'none' ? '' : style.transform;
 
+	const od = target_opacity - opacity;
+
 	return {
 		delay,
 		duration,
 		easing,
 		css: t => `
 			transform: ${transform} translate(${(1 - t) * x}px, ${(1 - t) * y}px);
-			opacity: ${t * opacity}`
+			opacity: ${1 - (od * u)}`
 	};
 }
 
@@ -73,13 +76,12 @@ export function scale(node, {
 	start = 0,
 	opacity = 0
 }) {
-	const sd = 1 - start;
-	const od = 1 - opacity;
+	const style = getComputedStyle(node);
+	const target_opacity = +style.opacity;
+	const transform = style.transform === 'none' ? '' : style.transform;
 
-	const transform = (
-		node.style.transform ||
-		getComputedStyle(node).transform
-	).replace('none', '');
+	const sd = 1 - start;
+	const od = target_opacity - opacity;
 
 	return {
 		delay,
@@ -94,11 +96,22 @@ export function scale(node, {
 
 export function draw(node, {
 	delay = 0,
-	duration = 800,
+	speed,
+	duration,
 	easing = cubicInOut
 }) {
 	const len = node.getTotalLength();
 
+	if (duration === undefined) {
+		if (speed === undefined) {
+			duration = 800;
+		} else {
+			duration = len / speed;
+		}
+	} else if (typeof duration === 'function') {
+		duration = duration(len);
+	}
+
 	return {
 		delay,
 		duration,

From 2a2361fe35907f01f8e1c044fdb3bb63c4bab0bb Mon Sep 17 00:00:00 2001
From: Richard Harris <richard.a.harris@gmail.com>
Date: Sat, 13 Apr 2019 15:38:52 -0400
Subject: [PATCH 2/2] fix opacities

---
 transition.mjs | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/transition.mjs b/transition.mjs
index 2421b1cd72..d8dd5ca345 100644
--- a/transition.mjs
+++ b/transition.mjs
@@ -25,15 +25,15 @@ export function fly(node, {
 	const target_opacity = +style.opacity;
 	const transform = style.transform === 'none' ? '' : style.transform;
 
-	const od = target_opacity - opacity;
+	const od = target_opacity * (1 - opacity);
 
 	return {
 		delay,
 		duration,
 		easing,
-		css: t => `
+		css: (t, u) => `
 			transform: ${transform} translate(${(1 - t) * x}px, ${(1 - t) * y}px);
-			opacity: ${1 - (od * u)}`
+			opacity: ${target_opacity - (od * u)}`
 	};
 }
 
@@ -81,7 +81,7 @@ export function scale(node, {
 	const transform = style.transform === 'none' ? '' : style.transform;
 
 	const sd = 1 - start;
-	const od = target_opacity - opacity;
+	const od = target_opacity * (1 - opacity);
 
 	return {
 		delay,
@@ -89,7 +89,7 @@ export function scale(node, {
 		easing,
 		css: (t, u) => `
 			transform: ${transform} scale(${1 - (sd * u)});
-			opacity: ${1 - (od * u)}
+			opacity: ${target_opacity - (od * u)}
 		`
 	};
 }