bug fix: slides smooth scroll animation

app/package.json

@@ -122,7 +122,7 @@
     "cross-fetch": "^3.1.5",
     "d3-geo": "^2.0.1",
     "d3-tile": "^1.0.0",
-    "gsap": "^3.6.0",
+    "gsap": "^3.12.2",
     "handlebars": "4.7.7",
     "innersvg-polyfill": "^0.0.5",
     "lodash.throttle": "^4.1.1",

app/src/components/slidesContainer.js

@@ -5,7 +5,7 @@ import { observeStore } from "../store";
 
 gsap.registerPlugin(ScrollToPlugin);
 
-const SCROLL_DURATION_SECONDS = 0.65;
+export const SCROLL_DURATION_SECONDS = 0.65;
 
 export class SlidesContainer extends Component {
   constructor(props) {
@@ -17,50 +17,59 @@ export class SlidesContainer extends Component {
 
     this.slides = [...this.element.querySelectorAll(".slide")];
     this.prefersReducedMotion = false;
-    this.activeSlide = this.store.getState().slides.curIndex;
+    this.activeSlideIdx = this.store.getState().slides.curIndex;
 
     this.handleSlidesUpdate = this.handleSlidesUpdate.bind(this);
     this.scrollToActiveSlide = this.scrollToActiveSlide.bind(this);
     this.handleMotionQuery = this.handleMotionQuery.bind(this);
+    this.handleScrollComplete = this.handleScrollComplete.bind(this);
 
     this.handleMotionQuery();
     this.unsubscribe = observeStore(
       this.store,
       (state) => state.slides,
       this.handleSlidesUpdate
     );
+    this.scrollToActiveSlide();
   }
 
   handleSlidesUpdate() {
     const { slides } = this.store.getState();
     if (slides.curIndex !== this.activeSlideIdx) {
+      this.previousSlideIndex = this.activeSlideIdx;
       this.activeSlide = slides.curIndex;
       this.scrollToActiveSlide();
     }
   }
 
   scrollToActiveSlide() {
+    const id = `#slide-${this.activeSlideIdx + 1}`;
+    const duration = this.prefersReducedMotion ? 0 : SCROLL_DURATION_SECONDS;
     gsap.to(this.element, {
-      duration: this.prefersReducedMotion ? 0 : SCROLL_DURATION_SECONDS,
-      scrollTo: ".slide.active",
+      duration,
+      scrollTo: id,
       ease: "sine.inOut",
+      onComplete: this.handleScrollComplete,
     });
   }
 
+  handleScrollComplete() {
+    this.activeSlide.focus();
+  }
+
   handleMotionQuery() {
     const motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
     if (motionQuery.matches) {
       this.prefersReducedMotion = true;
     }
   }
 
-  set activeSlide(value) {
+  set activeSlide(index) {
     this.slides.forEach((slide) => {
-      if (slide === this.slides[value]) {
+      if (slide === this.slides[index]) {
         slide.classList.add("active");
         slide.removeAttribute("inert");
         slide.setAttribute("aria-hidden", false);
-        slide.focus();
       } else {
         slide.classList.remove("active");
         slide.setAttribute("inert", true);
@@ -73,8 +82,8 @@ export class SlidesContainer extends Component {
     return this.slides[this.activeSlideIdx];
   }
 
-  set activeSlideIdx(value) {
-    this.activeSlide = value;
+  set activeSlideIdx(index) {
+    this.activeSlide = index;
   }
 
   get activeSlideIdx() {

app/src/components/slidesContainer.spec.js

@@ -1,5 +1,5 @@
 import { gsap } from "gsap";
-import { SlidesContainer } from "./slidesContainer";
+import { SlidesContainer, SCROLL_DURATION_SECONDS } from "./slidesContainer";
 import { store, observeStore } from "../store";
 
 jest.mock("../store", () => {
@@ -25,7 +25,7 @@ const mockMatchMedia = (window.matchMedia = jest.fn(() => ({
 })));
 
 describe("SlidesContainer", () => {
-  const selector = ".slides-container";
+  const selector = ".slides";
   let element;
   let slidesContainer;
   let spyScrollToActiveSlide;
@@ -87,36 +87,57 @@ describe("SlidesContainer", () => {
     expect(observeStore).toHaveBeenCalledTimes(1);
   });
 
+  test("scrolls to active slide on init", () => {
+    expect(spyScrollToActiveSlide).toHaveBeenCalledTimes(1);
+  });
+
   test("handleSlidesUpdate responds to state.slides changes", () => {
+    spyScrollToActiveSlide.mockClear();
     store.getState.mockImplementationOnce(() => ({
       slides: {
         curIndex: 5,
       },
     }));
     slidesContainer.handleSlidesUpdate();
+    const activeSlideIndex = slidesContainer.activeSlideIdx;
+    const activeSlide = slidesContainer.activeSlide;
+    const nonActiveSlides = slidesContainer.slides.filter(
+      (slide) => !slide.classList.contains("active")
+    );
     expect(spyScrollToActiveSlide).toHaveBeenCalledTimes(1);
-    expect(slidesContainer.activeSlideIdx).toBe(5);
+    expect(activeSlideIndex).toBe(5);
+    expect(activeSlide.getAttribute("inert")).toBeNull();
+    expect(activeSlide.getAttribute("aria-hidden")).toBe("false");
+    nonActiveSlides.forEach((slide) => {
+      expect(slide.getAttribute("inert")).toBe("true");
+      expect(slide.getAttribute("aria-hidden")).toBe("true");
+    });
   });
 
-  test("scrollToActiveSlide calls gsap.to", () => {
+  test("scrollToActiveSlide calls gsap.to with expected params", () => {
+    gsap.to.mockClear();
     slidesContainer.scrollToActiveSlide();
     expect(gsap.to).toHaveBeenCalledTimes(1);
     expect(gsap.to).toHaveBeenCalledWith(element, {
-      duration: 0.65,
-      scrollTo: ".slide.active",
+      duration: SCROLL_DURATION_SECONDS,
+      scrollTo: "#slide-1",
       ease: "sine.inOut",
+      onComplete: slidesContainer.handleScrollComplete,
     });
   });
 
+  test("when scroll completes, active slide is focused", () => {
+    slidesContainer.handleScrollComplete();
+    expect(document.activeElement).toBe(slidesContainer.activeSlide);
+  });
+
   test("checks prefers-reduced-motion media query", () => {
+    expect(slidesContainer.prefersReducedMotion).toBe(false);
     mockMatchMedia.mockImplementation(() => ({ matches: true }));
     slidesContainer = new SlidesContainer({
       element,
       store,
     });
-    expect(mockMatchMedia).toHaveBeenCalledWith(
-      "(prefers-reduced-motion: reduce)"
-    );
     expect(slidesContainer.prefersReducedMotion).toBe(true);
   });
 
@@ -125,8 +146,9 @@ describe("SlidesContainer", () => {
     slidesContainer.scrollToActiveSlide();
     expect(gsap.to).toHaveBeenCalledWith(slidesContainer.element, {
       duration: 0,
-      scrollTo: ".slide.active",
+      scrollTo: "#slide-1",
       ease: "sine.inOut",
+      onComplete: slidesContainer.handleScrollComplete,
     });
   });
 });

app/src/utils/initApp.js

@@ -72,7 +72,7 @@ export default function initApp() {
   registry.add(
     "slidesContainer",
     new SlidesContainer({
-      element: document.querySelector(".slides-container"),
+      element: document.querySelector(".slides"),
       store,
     })
   );

app/yarn.lock

@@ -4886,10 +4886,10 @@ growly@^1.3.0:
   resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081"
   integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=
 
-gsap@^3.6.0:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/gsap/-/gsap-3.6.0.tgz#925f25370c698ce0f6ea563522da8f6b5ed21b0a"
-  integrity sha512-0P3syv1TmYr+A/VZ8UMFzw+s0XoaKSzzDFs8NqkXiJTXI4E/VTi0zRjPgxaPBpiUPPycgRnFjLDe0Tb4dRRf+w==
+gsap@^3.12.2:
+  version "3.12.4"
+  resolved "https://registry.yarnpkg.com/gsap/-/gsap-3.12.4.tgz#b9383fe16bb14968e2c7db2a7c0e308edf551e7b"
+  integrity sha512-1ByAq8dD0W4aBZ/JArgaQvc0gyUfkGkP8mgAQa0qZGdpOKlSOhOf+WNXjoLimKaKG3Z4Iu6DKZtnyszqQeyqWQ==
 
 handle-thing@^2.0.0:
   version "2.0.1"