CFT-63 disable animation when reduce motion is enabled

js/theme.js

@@ -6471,8 +6471,11 @@ var cpSchoolThemeHelpers = function ($) {
     });
   }
 
+  // Check if user prefers reduced motion.
+  const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
   // Handles basic animations on the site.
-  if (cpSchoolData.animations) {
+  if (!prefersReducedMotion && cpSchoolData.animations) {
     $('.entry-content > .alignfull, .entry-content > .alignwide, .entry-content > .aligncenter').not('.has-parallax').attr('data-aos', 'fade-up');
     $('.entry-content > .alignleft').not('.has-parallax').attr('data-aos', 'fade-right');
     $('.entry-content > .alignright').not('.has-parallax').attr('data-aos', 'fade-left');

sass/theme/_general.scss

@@ -34,10 +34,10 @@
         }
     }
 
-    .screen-reader-text { 
-        @extend .sr-only; 
+    .screen-reader-text {
+        @extend .sr-only;
     }
-    
+
     a.skip-link {
       position: fixed;
       z-index: 1000;
@@ -80,4 +80,15 @@ body.singular:not(.has-sidebar) #content.container, .container-content {
 
 .cps-icon.cps-dashicon {
     font-family: dashicons !important;
-}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	*, *::before, *::after {
+		animation: none !important;
+		transition: none !important;
+	}
+
+	[data-aos] {
+		opacity: 1 !important;
+	}
+}

sass/theme/components/_entries.scss

@@ -182,6 +182,10 @@ body.blog.hide-hero-page-title {//CUSTOMIZER-ONLY
 			&.has-parallax {
 				opacity: initial;
 			}
+
+			@media (prefers-reduced-motion: reduce) {
+				opacity: initial;
+			}
         }
     }
 }

src/js/custom-javascript.js

@@ -73,8 +73,11 @@
 		});
 	}
 
+	// Check if user prefers reduced motion.
+	const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
 	// Handles basic animations on the site.
-	if (cpSchoolData.animations) {
+	if (!prefersReducedMotion && cpSchoolData.animations) {
 		$('.entry-content > .alignfull, .entry-content > .alignwide, .entry-content > .aligncenter')
 			.not('.has-parallax')
 			.attr('data-aos', 'fade-up');