From 3eb3ec3a5d4298c7f206cb52e7319c7eb77dd76c Mon Sep 17 00:00:00 2001
From: Jarmo Pertman <jarmo@jarmopertman.com>
Date: Sun, 27 Mar 2022 14:34:06 +0300
Subject: [PATCH 1/3] Restore animations when changing months - based on
 5d0784395

---
 CalendarPicker.js        | 32 ++++++++++++++++++++++++++++++
 CalendarPicker.style.css | 42 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 74 insertions(+)

diff --git a/CalendarPicker.js b/CalendarPicker.js
index 758d334..af73abe 100644
--- a/CalendarPicker.js
+++ b/CalendarPicker.js
@@ -173,8 +173,29 @@ CalendarPicker.prototype._insertCalendarIntoWrapper = function () {
 
         handleSelectedElement(keyEvent);
     }, false);
+
+    this.calendarGrid.addEventListener('animationend', () => {
+        this._resetCalendarAnimations();
+
+        if (this.goingToPrevious) {
+            this.calendarGrid.classList.add('swoosh-down-reverse');
+            this.goingToPrevious = false;
+            this._insertDaysIntoGrid();
+        }
+        if (this.goingToNext) {
+            this.calendarGrid.classList.add('swoosh-up-reverse');
+            this.goingToNext = false;
+            this._insertDaysIntoGrid();
+        }
+
+    }, false);
 }
 
+CalendarPicker.prototype._resetCalendarAnimations = function() {
+    this.calendarGrid.classList.remove('swoosh-up', 'swoosh-up-reverse', 'swoosh-down', 'swoosh-down-reverse');
+}
+
+
 /**
  * @description Adds the "main" calendar-header.
  */
@@ -217,6 +238,8 @@ CalendarPicker.prototype._insertNavigationButtons = function () {
     // Cannot use arrow-functions for IE support :(
     var that = this;
     this.navigationWrapper.addEventListener('click', function (clickEvent) {
+        that._resetCalendarAnimations();
+
         if (clickEvent.target.closest('#' + that.previousMonthArrow.id)) {
             if (that.month === 0) {
                 that.month = 11;
@@ -288,6 +311,7 @@ CalendarPicker.prototype._insertDaysIntoGrid = function () {
  * given by the navigation. Also updates the UI with the new values.
  */
 CalendarPicker.prototype._updateCalendar = function () {
+    this.previousDate = this.date;
     this.date = new Date(this.year, this.month);
 
     this._setDateText();
@@ -301,6 +325,14 @@ CalendarPicker.prototype._updateCalendar = function () {
     window.requestAnimationFrame(function () {
         that.calendarHeaderTitle.textContent = that.listOfAllMonthsAsText[that.month] + ' - ' + that.year;
         that._insertDaysIntoGrid();
+
+        if (that.previousDate < that.date) {
+            that.calendarGrid.classList.add('swoosh-up');
+            that.goingToPrevious = true;
+        } else {
+            that.calendarGrid.classList.add('swoosh-down');
+            that.goingToNext = true;
+        }
     })
 }
 
diff --git a/CalendarPicker.style.css b/CalendarPicker.style.css
index 188c0c1..ff70f94 100644
--- a/CalendarPicker.style.css
+++ b/CalendarPicker.style.css
@@ -1,3 +1,45 @@
+@keyframes swoosh-up {
+    0% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    100% {
+        opacity: 0.1;
+        transform: translateY(0.8em);
+    }
+
+}
+
+@keyframes swoosh-down {
+    0% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    100% {
+        opacity: 0.1;
+        transform: translateY(-0.8em);
+    }
+
+}
+
+.swoosh-up {
+    animation: swoosh-up 100ms ;
+}
+
+.swoosh-up-reverse {
+    animation: swoosh-up 100ms reverse;
+}
+
+.swoosh-down {
+    animation: swoosh-down 100ms ;
+}
+
+.swoosh-down-reverse {
+    animation: swoosh-down 100ms reverse;
+}
+
 #calendar-wrapper {
     width: 100%;
     display: grid;

From 00587395431c43b1932830c899addb283d999ff6 Mon Sep 17 00:00:00 2001
From: Jarmo Pertman <jarmo@jarmopertman.com>
Date: Sun, 27 Mar 2022 14:36:28 +0300
Subject: [PATCH 2/3] Remove unnecessary white-space

---
 CalendarPicker.style.css | 2 --
 1 file changed, 2 deletions(-)

diff --git a/CalendarPicker.style.css b/CalendarPicker.style.css
index ff70f94..7dc6e55 100644
--- a/CalendarPicker.style.css
+++ b/CalendarPicker.style.css
@@ -8,7 +8,6 @@
         opacity: 0.1;
         transform: translateY(0.8em);
     }
-
 }
 
 @keyframes swoosh-down {
@@ -21,7 +20,6 @@
         opacity: 0.1;
         transform: translateY(-0.8em);
     }
-
 }
 
 .swoosh-up {

From d394efc22b8b8b1f134342f661e6ac79f7e5a069 Mon Sep 17 00:00:00 2001
From: Jarmo Pertman <jarmo@jarmopertman.com>
Date: Tue, 21 Jun 2022 15:59:16 +0300
Subject: [PATCH 3/3] Disable animations via CSS media property
 prefers-reduced-motion

---
 CalendarPicker.style.css | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/CalendarPicker.style.css b/CalendarPicker.style.css
index 7dc6e55..5a804f4 100644
--- a/CalendarPicker.style.css
+++ b/CalendarPicker.style.css
@@ -38,6 +38,15 @@
     animation: swoosh-down 100ms reverse;
 }
 
+@media (prefers-reduced-motion) {
+    .swoosh-up,
+    .swoosh-up-reverse,
+    .swoosh-down,
+    .swoosh-down-reverse {
+      animation: none;
+    }
+}
+
 #calendar-wrapper {
     width: 100%;
     display: grid;