was broken in IE 11

spotlight-client/.eslintrc.json

@@ -50,6 +50,10 @@
           {
             "name": "styled-components",
             "message": "Please import from styled-components/macro."
+          },
+          {
+            "name": "react-spring",
+            "message": "For IE 11 support, please import from react-spring/web.cjs"
           }
         ],
         "patterns": ["!styled-components/macro"]

spotlight-client/src/SystemNarrativePage/SectionNavigation.tsx

@@ -19,7 +19,7 @@ import { Link, useParams } from "@reach/router";
 import { format } from "d3-format";
 import { rem } from "polished";
 import React, { useEffect } from "react";
-import { animated, useSpring } from "react-spring";
+import { animated, useSpring } from "react-spring/web.cjs";
 import styled from "styled-components/macro";
 import { NAV_BAR_HEIGHT } from "../constants";
 import getUrlForResource from "../routerUtils/getUrlForResource";

spotlight-client/src/SystemNarrativePage/SystemNarrativePage.tsx

@@ -20,7 +20,7 @@ import HTMLReactParser from "html-react-parser";
 import { rem } from "polished";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { InView } from "react-intersection-observer";
-import { useSpring } from "react-spring";
+import { useSpring } from "react-spring/web.cjs";
 import styled from "styled-components/macro";
 import { NAV_BAR_HEIGHT } from "../constants";
 import SystemNarrative from "../contentModels/SystemNarrative";
@@ -98,11 +98,11 @@ const SystemNarrativePage: React.FC<{
     [isScrolling]
   );
   const [, setScrollSpring] = useSpring(() => ({
-    onFrame: (props: { top: number }) => window.scrollTo({ top: props.top }),
+    onFrame: (props: { top: number }) => window.scrollTo(0, props.top),
     // set the flag while animation is in progress
     onRest: () => setIsScrolling(false),
     onStart: () => setIsScrolling(true),
-    to: { top: window.scrollY },
+    to: { top: window.pageYOffset },
   }));
 
   const { tenantId, narrativeTypeId } = normalizeRouteParams(routeParams);
@@ -117,14 +117,14 @@ const SystemNarrativePage: React.FC<{
     );
     if (desiredSection) {
       scrollDestination =
-        window.scrollY + desiredSection.getBoundingClientRect().top;
+        window.pageYOffset + desiredSection.getBoundingClientRect().top;
     }
 
     // in practice this should always be defined, this is just type safety
     if (scrollDestination !== undefined) {
       setScrollSpring({
         to: { top: scrollDestination - NAV_BAR_HEIGHT },
-        from: { top: window.scrollY },
+        from: { top: window.pageYOffset },
         reset: true,
       });