Highlight changed lines

src/airframe/airframe.js

@@ -1,17 +1,26 @@
 import easing from "./easing";
+const MULTIPLY = "multiply";
+
 /* eslint-disable */
-function mergeResults(results) {
+function mergeResults(results, composite) {
   const firstResult = results[0];
   if (results.length < 2) {
     return firstResult;
   }
   if (Array.isArray(firstResult)) {
-    // console.log("merge", results);
     return firstResult.map((_, i) => {
-      return mergeResults(results.map(result => result[i]));
+      return mergeResults(results.map(result => result[i]), composite);
     });
   } else {
-    return Object.assign({}, ...results);
+    const merged = Object.assign({}, ...results);
+
+    if (composite === MULTIPLY) {
+      const opacities = results.map(x => x.opacity).filter(x => x != null);
+      if (opacities.length !== 0) {
+        merged.opacity = opacities.reduce((a, b) => a * b);
+      }
+    }
+    return merged;
   }
 }
 
@@ -19,7 +28,7 @@ const airframe = {
   parallel: ({ children: fns }) => {
     return (t, ...args) => {
       const styles = fns.map(fn => fn(t, ...args));
-      const result = mergeResults(styles);
+      const result = mergeResults(styles, MULTIPLY);
       return result;
     };
   },

src/animation.js

@@ -43,7 +43,8 @@ function GrowHeight() {
   );
 }
 
-function SwitchLines({ filterExit, filterEnter }) {
+const offOpacity = 0.4;
+function SwitchLines({ filterExit, filterEnter, filterFadeOut }) {
   return (
     <parallel>
       <Stagger interval={0.2} filter={filterExit}>
@@ -59,6 +60,19 @@ function SwitchLines({ filterExit, filterEnter }) {
           <SlideFromRight />
         </chain>
       </Stagger>
+      <Stagger interval={0} filter={filterEnter}>
+        <tween from={{ opacity: offOpacity }} to={{ opacity: 1 }} />
+      </Stagger>
+      <Stagger interval={0} filter={filterFadeOut}>
+        <tween
+          from={{ opacity: 1 }}
+          to={{ opacity: offOpacity }}
+          ease={easing.easeOutCubic}
+        />
+      </Stagger>
+      <Stagger interval={0} filter={l => !filterEnter(l) && !filterFadeOut(l)}>
+        <tween from={{ opacity: offOpacity }} to={{ opacity: offOpacity }} />
+      </Stagger>
     </parallel>
   );
 }
@@ -68,10 +82,12 @@ export default (
     <SwitchLines
       filterExit={line => line.left && !line.middle}
       filterEnter={line => !line.left && line.middle}
+      filterFadeOut={line => false}
     />
     <SwitchLines
       filterExit={line => line.middle && !line.right}
       filterEnter={line => !line.middle && line.right}
+      filterFadeOut={line => !line.left && line.middle}
     />
   </chain>
 );