Respect reduced motion

Author: geoffrich

README.md

@@ -1,8 +1,17 @@
-# sveltekit-shared-element-transitions-codelab
+# sveltekit-shared-element-transitions
 
-SvelteKit version of the [Shared Element Transitions Google CodeLab](https://codelabs.developers.google.com/create-an-instant-and-seamless-web-app#5). Only works in Chrome Canary with the documentTransition API flag enabled and may break at any time due to the API changing.
+SvelteKit version of the [Shared Element Transitions Google CodeLab](https://codelabs.developers.google.com/create-an-instant-and-seamless-web-app#5). Only works in Chrome Canary with the `chrome://flags/#document-transition` flag enabled and may break at any time due to the API changing.
 
-Bugs that I need to look into:
+## Additional features
 
-- layout shifting during transition
+In porting this to Svelte, I also implemented some additional features.
+
+- Also transition the fruit page heading, in addition to the image
+- Transition _back_ to the list of fruits
+- Respect reduced motion by not playing the transition if reduced motion is enabled
+- Transition when the back/forward buttons are clicked (the original demo only used a link click as the trigger)
+
+## Bugs
+
+- layout shifts during transition
 - sveltekit:prefetch causes the page to transition from the top-right corner instead. not sure why.

package.json

@@ -1,5 +1,5 @@
 {
-	"name": "sveltekit-shared-element-transitions-codelab",
+	"name": "sveltekit-shared-element-transitions",
 	"version": "0.0.1",
 	"scripts": {
 		"dev": "svelte-kit dev",

src/lib/utils/page-transition.js src/lib/page-transition.js

@@ -1,6 +1,7 @@
 import { afterNavigate, beforeNavigate } from '$app/navigation';
-import { setContext, getContext, hasContext } from 'svelte';
+import { setContext, getContext, hasContext, onDestroy } from 'svelte';
 import { writable } from 'svelte/store';
+import reducedMotion from './reduced-motion';
 
 const contextKey = 'transition';
 
@@ -9,22 +10,19 @@ export function initTransitionContext() {
 	return setContext(contextKey, writable({}));
 }
 
-export function getTransitionContext() {
+function getTransitionContext() {
 	if (!hasContext(contextKey)) {
 		return initTransitionContext();
 	}
 	return getContext(contextKey);
 }
 
-// Call this hook on this first page before you start the page transition.
-// For Shared Element Transitions, you need to call the transition.start()
-// method before the next page begins to render, and you need to do the
-// Document Object Model (DOM) modification or setting of new shared
-// elements inside the callback so that this hook returns the promise and
-// defers to the callback resolve.
 export const preparePageTransition = () => {
 	const transitionStore = getTransitionContext();
 	let unsub;
+	let isReducedMotionEnabled;
+
+	let unsubReducedMotion = reducedMotion.subscribe((val) => (isReducedMotionEnabled = val));
 
 	function updateStore(key, value) {
 		transitionStore.update((current) => ({
@@ -38,7 +36,7 @@ export const preparePageTransition = () => {
 		unsub?.(); // clean up previous subscription
 
 		// Feature detection
-		if (!document.createDocumentTransition) {
+		if (!document.createDocumentTransition || isReducedMotionEnabled) {
 			return;
 		}
 
@@ -55,6 +53,8 @@ export const preparePageTransition = () => {
 
 	afterNavigate(({ to }) => {
 		const transitionKey = to.pathname;
+		// we need to subscribe to prevent race conditions
+		// sometimes this runs before the store is updated with the new transition
 		unsub = transitionStore.subscribe((transitions) => {
 			const transition = transitions[transitionKey];
 			if (!transition) {
@@ -64,4 +64,9 @@ export const preparePageTransition = () => {
 			resolver();
 		});
 	});
+
+	onDestroy(() => {
+		unsub?.();
+		unsubReducedMotion();
+	});
 };

src/lib/reduced-motion.js

@@ -0,0 +1,23 @@
+import { readable } from 'svelte/store';
+import { browser } from '$app/env';
+
+const reducedMotionQuery = '(prefers-reduced-motion: reduce)';
+
+const getInitialMotionPreference = () => {
+	if (!browser) return false;
+	return window.matchMedia(reducedMotionQuery).matches;
+};
+
+export default readable(getInitialMotionPreference(), (set) => {
+	if (browser) {
+		const setReducedMotion = (event) => {
+			set(event.matches);
+		};
+		const mediaQueryList = window.matchMedia(reducedMotionQuery);
+		mediaQueryList.addEventListener('change', setReducedMotion);
+
+		return () => {
+			mediaQueryList.removeEventListener('change', setReducedMotion);
+		};
+	}
+});

src/routes/__layout.svelte

@@ -2,7 +2,7 @@
 	import '../app.css';
 	import Navbar from '$lib/Navbar.svelte';
 	import Footer from '$lib/Footer.svelte';
-	import { initTransitionContext, preparePageTransition } from '$lib/utils/page-transition';
+	import { initTransitionContext, preparePageTransition } from '$lib/page-transition';
 
 	initTransitionContext();
 	preparePageTransition();