diff --git a/assets/javascripts/new-javascripts/hero.js b/assets/javascripts/new-javascripts/hero.js
index 22dd10894..913a35b50 100644
--- a/assets/javascripts/new-javascripts/hero.js
+++ b/assets/javascripts/new-javascripts/hero.js
@@ -1,5 +1,5 @@
 const heroAnimation = async () => {
-  const reduceMotion = document.body.classList.contains('reduced-motion')
+  const isReduceMotionEnabled = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
   const urlParams = new URLSearchParams(location.search)
   const hasDebugParam = urlParams.has('debug')
 
@@ -103,23 +103,35 @@ const heroAnimation = async () => {
     // Convert SVG path pulled from AE masks
     let pathInstance = new Path2D(path)
 
-    ctx.setLineDash([pathLength])
-    ctx.lineDashOffset = pathLength
+    if (!isReduceMotionEnabled) {
+      ctx.setLineDash([pathLength])
+      ctx.lineDashOffset = pathLength
 
-    if (hasDebugParam) {
-      ctx.strokeStyle = debugColor
-      ctx.stroke(pathInstance)
+      if (hasDebugParam) {
+        ctx.strokeStyle = debugColor
+        ctx.stroke(pathInstance)
+      }
+    } else {
+      ctx.drawImage(image, 0, 0)
     }
+
     return { ctx, pathInstance }
   }
 
-  const initLogo = ({ canvas, image, positionStart: [posX, posY] }) => {
+  const initLogo = ({ canvas, image, positionStart: [posX, posY], positionEnd: [endX, endY] }) => {
     const ctx = canvas.getContext('2d')
-    ctx.globalAlpha = 0
     // Same reason for conversion as initSwoops
     ctx.translate(posX - image.naturalWidth / 2, posY - image.naturalHeight / 2)
 
-    ctx.drawImage(image, 0, 0)
+    if (!isReduceMotionEnabled) {
+      ctx.globalAlpha = 0
+      ctx.drawImage(image, 0, 0)
+    } else {
+      ctx.globalAlpha = 1
+      const deltaX = endX - posX;
+      const deltaY = endY - posY;
+      ctx.drawImage(image, deltaX, deltaY);
+    }
 
     return ctx
   }
@@ -135,11 +147,11 @@ const heroAnimation = async () => {
     logo.image = logoImage
     // init canvas for each swoop layer
     heroSwoops.forEach((swoop, i) => {
-      swoop.image = swoopImages[i]
-      const canvasData = initSwoops(swoop)
-      swoop.ctx = canvasData.ctx
-      swoop.pathInstance = canvasData.pathInstance
-    })
+      swoop.image = swoopImages[i];
+      const canvasData = initSwoops(swoop);
+      swoop.ctx = canvasData.ctx;
+      swoop.pathInstance = canvasData.pathInstance;
+    });
     // init logo canvas
     logo.ctx = initLogo(logo)
   } catch (error) {
@@ -147,6 +159,10 @@ const heroAnimation = async () => {
     throw error
   }
 
+  if (isReduceMotionEnabled) {
+    return;
+  }
+
   const DURATION = 1000
 
   const tl = anime.createTimeline({